@charset "utf-8";

/* we also include these directly with <link> because the wrong font
   weight/style gets selected for source code pro otherwise???? it's
   faster that way anyway */
@import url("/css/font-sourcecodepro.css");
@import url("/css/font-mulish.css");
@import url("/css/font-merriweather.css");

:root {
    --lineheight: 3ex;

    --longform-family: "Mulish", sans-serif;
    --title-family: "Merriweather", serif;
    --monospace-family: "Source Code Pro", monospace;
    --base-font-size: 10pt;
    --logo-font-shrink: 2pt;
    /* it's a bit smaller-looking than the monospaced font */
    --longform-size: calc(var(--base-font-size) + 1pt);
    --code-width: 80ch;
    /* how many characters might line numbers be? */
    --code-numbering-width: 2ch;
    --code-side-padding: 1ex;
    --header-breathing-room: 120px;
    --header-width: 62ch;

    /* colors from "base16-eighties"
       https://base16.vercel.app/previews/base16-eighties
       https://github.com/tinted-theming/base16-emacs/blob/main/build/base16-eighties-theme.el */
    --color-base00: #2d2d2d;
    --color-base01: #393939;
    --color-base02: #515151;
    --color-base03: #747369;
    --color-base04: #a09f93;
    --color-base05: #d3d0c8;
    --color-base06: #e8e6df;
    --color-base07: #f2f0ec;
    --color-base08: #f2777a;
    --color-base09: #f99157;
    --color-base0a: #ffcc66;
    --color-base0b: #99cc99;
    --color-base0c: #66cccc;
    --color-base0d: #6699cc;
    --color-base0e: #cc99cc;
    --color-base0f: #d27b53;
}

html {
    height: 100%;
    color-scheme: light dark;

    /* "light mode" default color scheme */
    --background-color: var(--color-base07);
    --text-color: var(--color-base00);
    --code-background-color: var(--color-base00);
    --code-text-color: var(--color-base05);
    --literal-background-color: var(--color-base06);
    --literal-text-color: var(--color-base00);
    --faded-color: var(--color-base05);

    --link-color: var(--color-base0d);
}

@media (prefers-color-scheme: dark) {
    html {
        --background-color: var(--color-base00);
        --text-color: var(--color-base05);
        --code-background-color: var(--color-base01);
        --code-text-color: var(--color-base05);
        --literal-background-color: var(--color-base01);
        --literal-text-color: var(--color-base05);
        --faded-color: var(--color-base02);

        --link-color: var(--color-base0d);
    }
}

@media only screen and (max-width: 400px) {
    :root {
        --logo-font-shrink: 3pt;
    }
    /* waste less space with inter-word justification on small screens */
    p, li {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

@media only screen and (max-width: 350px) {
    :root {
        --logo-font-shrink: 4.5pt;
    }
}

@supports (height: 1lh) {
    :root {
        --lineheight: 1lh;
    }
}

body {
    font: normal var(--base-font-size) var(--monospace-family);
    color: var(--text-color);
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    margin: 8px;
    height: calc(100% - 16px);
    overflow-wrap: break-word;
}

div.header-space {
    flex-basis: auto;
    flex-shrink: 2;
    height: var(--header-breathing-room);
    min-height: 0;
    max-height: var(--header-breathing-room);
    max-width: 10pt;
}

div.root-grid {
    flex-basis: auto;
    flex-shrink: 0;
    display: grid;
    /* set the code block font to calculate the column width based on
       the font width */
    font: normal var(--base-font-size) var(--monospace-family);
    /* the width should be (code width + width of the line numbers
       themselves + total padding from pre + 2ex space for the line
       between line numbers and code + 1px border between) but at most
       the width of the bounding box (which is viewport minus margins)
       to prevent horizontal scrolling on small screens. this works
       perfectly for blocks with line numbers but leaves a little bit
       of space on the right for unnumbered blocks since the result
       isn't a multiple of ch. */
    grid-template-columns: min(100%, calc(var(--code-width) + var(--code-numbering-width) + calc(2 * var(--code-side-padding)) + 2ex + 1px));
    grid-auto-flow: row;
    justify-content: center;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

div.root-grid > * {
    width: 100%;
    font: normal var(--longform-size) var(--longform-family);
}

div.root-grid main > *:first-child {
    margin-top: 0;
}

/* navigation */
div.root-grid > nav {
    display: flex;
    justify-content: flex-start;
}

div.root-grid > nav > ul {
    display: inline;
    list-style: none;
    padding: 0;
    flex-grow: 0;
    margin: 0 1ch;
}

div.root-grid > nav > ul:first-child {
    margin-left: 0;
}

div.root-grid > nav > ul:last-child {
    justify-self: flex-end;
    flex-grow: 1;
    text-align: right;
    margin-right: 0;
}

div.root-grid > nav > ul > li {
    display: inline;
}

div.root-grid > nav > ul > li::after {
    content: " -";
}

div.root-grid > nav > ul > li:last-child::after {
    content: "";
}

/* title and section headings */
article.single h1#page-title {
    font-size: 2em;
}

article.single :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--title-family);
    position: relative;
    margin: 0;
}

article.single :is(h1, h2, h3, h4, h5, h6) > a > svg {
    display: none;
    position: absolute;
    width: calc(var(--lineheight) * 0.8);
    height: calc(var(--lineheight) * 0.8);
    top: 50%;
    transform: translateY(-50%);
}

article.single :is(h1, h2, h3, h4, h5, h6):hover > a > svg {
    display: inline;
}

article.single :is(h1, h2, h3, h4, h5, h6) + *, article > *:first-child, article section > *:first-child {
    margin-top: 0;
}

/* article lists */
ul.list-page {
    list-style: none;
    padding: 0;
}

ul.list-page li {
    display: block;
    background: var(--literal-background-color);
    margin: var(--lineheight) 1ch 0 1ch;
}

ul.list-page li:hover {
    background: var(--faded-color);
}

ul.list-page li h1 {
    margin: 0;
}

ul.list-page li a.list {
    color: inherit;
    text-decoration: inherit;
}

main > div.subheader {
    /* set the same font as the header had so the character size for
       the width is consistent */
    font: normal calc(var(--base-font-size) - var(--logo-font-shrink)) var(--monospace-family);
    /* we want to stick out a little bit left of the logo */
    width: calc(var(--header-width) + 26pt);
    max-width: calc(var(--header-width) + 26pt);
    margin-left: auto;
    margin-right: auto;
}

main > div.subheader > * {
    font: normal calc(var(--base-font-size) - 1pt) var(--monospace-family);
    margin: 0;
}

.descriptive {
    display: none;
}

header pre {
    font: normal calc(var(--base-font-size) - var(--logo-font-shrink)) var(--monospace-family);
    margin: 0;
    text-align: center;
}

/* footnotes */
/* not currently used because there are no footnote render hooks in hugo */
/* wishlist:
   - css paged media and generated content for paged media modules
     (for printing footnotes correctly)
   - automatic numbering
   - sticking footnotes in the footer automatically (flexbox flex-end?) */
main a[href^="#fn"] {
    vertical-align: top;
    font-size: smaller;
    position: relative;
    top: -0.1em;
    margin-left: 0.2em;
    color: var(--link-color);
    text-decoration: underline;
}

main a[href^="#fn"]:hover {
    opacity: 80%;
}

main a[href^="#fn"]::before {
    content: "[";
    cursor: inherit;
}

main a[href^="#fn"]::after {
    content: "]";
    cursor: inherit;
}

footer.footnotes > p {
    grid-column: 2;
    margin: 0;
    display: contents;
}

footer.footnotes > p::before {
    counter-increment: footnote;
    content: counter(footnote) ".";
    padding-right: 1ch;
    grid-column: 1;
    text-align: right;
    overflow-wrap: normal;
    align-self: start;
}

footer.footnotes > p > span:target {
    background-color: var(--literal-background-color);
}

footer.footnotes {
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: min-content 1fr;
    counter-reset: footnote;
}

footer.footnotes::before {
    display: block;
    content: "";
    width: 100%;
    height: 0px;
    border-top: 1px solid var(--faded-color);
    margin-bottom: 1em;
    grid-column: 1 / span 2;
}

a[href]:not([href^="#fn"]) {
    color: var(--link-color);
    text-decoration: underline;
}

a[href]:not([href^="#fn"]):hover {
    opacity: 80%;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.17em;
}

h3 {
    font-size: .83em;
}

h5 {
    font-size: .67em;
}

h6 {
    font-size: .5em;
}

main hr {
    border: 0.5px solid var(--text-color);
    width: 80%;
}

main blockquote {
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
}

p, li {
    text-align: justify;
    text-justify: inter-word;
    /* hyphens: none; */
}

main blockquote::before {
    font-size: 200%;
    content: "“";
    text-align: center;
    position: absolute;
    left: -40px;
    width: 40px;
}

main code:not([class]) {
    font: normal var(--base-font-size) var(--monospace-family);
    background: var(--literal-background-color);
    color: var(--literal-text-color);
    text-justify: none;
    hyphens: none;
    -webkit-hyphens: none;
}

/* code blocks */
main pre {
    font: normal var(--base-font-size) var(--monospace-family);
    padding: 1ex var(--code-side-padding);
    background: var(--code-background-color);
    color: var(--code-text-color);
    white-space: normal;
    position: relative; /* for absolute positioning on hover */
}

main pre.unnumbered {
    padding: 1ex calc(var(--code-side-padding) + 1ex);
}

main pre > code.container {
    font: inherit;
    white-space: pre;
    display: contents;
    text-justify: none;
    hyphens: none;
    -webkit-hyphens: none;
}

/* defeat chroma's elements */
main pre > div.highlight, main pre > div.highlight > pre.chroma, main pre > div.highlight > pre.chroma > code {
    margin: 0;
    padding: 0;
    font: inherit;
    white-space: inherit;
    word-break: inherit;
    overflow-wrap: inherit;
    hyphens: inherit;
    -webkit-hyphens: inherit;
    display: contents;
}

main pre > code > span.line {
    font: inherit;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    text-justify: none;
    hyphens: none;
    -webkit-hyphens: none;
    position: relative;
    width: 100%;
    display: inline-block;
}

main pre.unnumbered code > span.line::after {
    content: " ↩↩↩↩↩↩↩↩↩↩";
    display: inline-block;
    width: 1ch;
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: -1ch;
    top: calc(-1 * var(--lineheight));
    opacity: 50%;
}

main pre.unnumbered code > span.line::before {
    content: " ↩↩↩↩↩↩↩↩↩↩";
    display: inline-block;
    width: 1ch;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: -1ch;
    opacity: 50%;
}

/* filenames */
main div.filename {
    font: normal var(--base-font-size) var(--monospace-family);
    padding: 1ex;
    background: var(--code-background-color);
    color: var(--code-text-color);
    white-space: normal;
}

main div.filename + pre {
    margin-top: 1px;
}

/* handle automatic line numbering inside code blocks */
main pre.numbered {
    counter-reset: line-number;
    display: grid;
    grid-template-columns: min-content 1fr;
    /* using right border/padding/margin to get a line, see below */
    /* grid-column-gap: 2ex; */
}

main pre.numbered code > span.line::before {
    counter-increment: line-number;
    content: counter(line-number);
    text-align: right;
    overflow-wrap: normal;
    grid-column: 1;
    align-self: start; /* in case of wrap, show the line number at the top */
    /* place a vertical line separator between the numbers and the
       line. we can't easily add this between grid cells */
    border-right: 1px solid var(--code-text-color);
    padding-right: 1ex;
    margin-right: 1ex;
    height: 100%; /* 100% of the line height (relevant if wrapped) */
    width: var(--code-numbering-width);
}

main pre.numbered code > span.line {
    display: contents;
    grid-column: 2;
}

/* show the language on hover if specified */
main pre[language]:hover::before {
    display: block;
    float: right;
    position: absolute;
    right: 1ex;
    content: attr(language);
    border-bottom: 1px solid var(--code-text-color);
}

@supports (speak: never) {
    /* we never add anything but styling with these, so try not to
       speak them. nothing seems to support this yet */
    *::before, *::after {
        speak: never;
    }
}

/* chroma styles for syntax highlighting*/
/* Background */ .bg { color: var(--color-base05); background-color: var(--color-base00); }
/* PreWrapper */ .chroma { color: var(--color-base05); background-color: var(--color-base00); }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err { color: var(--color-base08) }
/* CodeLine */ /* .chroma .cl {  } */
/* LineLink */ /* .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } */
/* LineTableTD */ /* .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
/* LineTable */ /* .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
/* LineHighlight */ /* .chroma .hl { background-color: #ffffcc } */
/* LineNumbersTable */ /* .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
/* LineNumbers */ /* .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
/* Line */ /* .chroma .line { display: flex; } */
/* Keyword */ .chroma .k { color: var(--color-base0e) }
/* KeywordConstant */ .chroma .kc { color: var(--color-base0e) }
/* KeywordDeclaration */ .chroma .kd { color: var(--color-base08) }
/* KeywordNamespace */ .chroma .kn { color: var(--color-base0e) }
/* KeywordPseudo */ .chroma .kp { color: var(--color-base0e) }
/* KeywordReserved */ .chroma .kr { color: var(--color-base0e) }
/* KeywordType */ .chroma .kt { color: var(--color-base0c) }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color: var(--color-base0d) }
/* NameBuiltin */ .chroma .nb { color: var(--color-base08) }
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc { color: var(--color-base0a) }
/* NameConstant */ .chroma .no { color: var(--color-base09) }
/* NameDecorator */ .chroma .nd { color: var(--color-base09) }
/* NameEntity */ .chroma .ni {  }
/* NameException */ .chroma .ne {  }
/* NameFunction */ .chroma .nf { color: var(--color-base0d) }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl { color: var(--color-base08) }
/* NameNamespace */ .chroma .nn {  }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color: var(--color-base0e) }
/* NameVariable */ .chroma .nv { color: var(--color-base08) }
/* NameVariableClass */ .chroma .vc { color: var(--color-base08) }
/* NameVariableGlobal */ .chroma .vg { color: var(--color-base08) }
/* NameVariableInstance */ .chroma .vi { color: var(--color-base08) }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color: var(--color-base0b) }
/* LiteralStringAffix */ .chroma .sa { color: var(--color-base0b) }
/* LiteralStringBacktick */ .chroma .sb { color: var(--color-base0b) }
/* LiteralStringChar */ .chroma .sc { color: var(--color-base0b) }
/* LiteralStringDelimiter */ .chroma .dl { color: var(--color-base0b) }
/* LiteralStringDoc */ .chroma .sd { color: var(--color-base0b) }
/* LiteralStringDouble */ .chroma .s2 { color: var(--color-base0b) }
/* LiteralStringEscape */ .chroma .se { color: var(--color-base0b) }
/* LiteralStringHeredoc */ .chroma .sh { color: var(--color-base0b) }
/* LiteralStringInterpol */ .chroma .si { color: var(--color-base0b) }
/* LiteralStringOther */ .chroma .sx { color: var(--color-base0b) }
/* LiteralStringRegex */ .chroma .sr { color: var(--color-base0b) }
/* LiteralStringSingle */ .chroma .s1 { color: var(--color-base0b) }
/* LiteralStringSymbol */ .chroma .ss { color: var(--color-base0b) }
/* LiteralNumber */ .chroma .m { color: var(--color-base09) }
/* LiteralNumberBin */ .chroma .mb { color: var(--color-base09) }
/* LiteralNumberFloat */ .chroma .mf { color: var(--color-base09) }
/* LiteralNumberHex */ .chroma .mh { color: var(--color-base09) }
/* LiteralNumberInteger */ .chroma .mi { color: var(--color-base09) }
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--color-base09) }
/* LiteralNumberOct */ .chroma .mo { color: var(--color-base09) }
/* Operator */ .chroma .o { color: var(--color-base0e) }
/* OperatorWord */ .chroma .ow { color: var(--color-base0e) }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color: var(--color-base03) }
/* CommentHashbang */ .chroma .ch { color: var(--color-base03) }
/* CommentMultiline */ .chroma .cm { color: var(--color-base03) }
/* CommentSingle */ .chroma .c1 { color: var(--color-base03) }
/* CommentSpecial */ .chroma .cs { color: var(--color-base03) }
/* CommentPreproc */ .chroma .cp { color: var(--color-base03) }
/* CommentPreprocFile */ .chroma .cpf { color: var(--color-base03) }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color: var(--color-base08) }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericError */ .chroma .gr { color: var(--color-base08) }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: var(--color-base02) }
/* GenericPrompt */ .chroma .gp {  }
/* GenericStrong */ .chroma .gs { font-style: italic }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericTraceback */ .chroma .gt {  }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w {  }