html {
    background-color: var(--body-background-color);
    color: var(--body-text-color);
    font-family: var(--serif-font-stack);
    font-size: var(--base-font-size);
    font-weight: 400;
}

/* Main and Body - Responsive-ish */
body {
    max-width: 1120px;
    font-size: var(--body-text-font-size);
}

@media only screen and (min-width: 650px) {
    body {
        padding: 0 25px 0 10px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1185px) {
    body {
        padding: 0 60px 0 5px;
    }
}

main {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}

/* Breakpoint for sidenotes*/
@media only screen and (min-width: 1761px) {
    main {
        position: relative;
        right: 40px;
    }
}

article {
    flex: 1 1 auto;
}

#sidebar {
    position: absolute;
}

header, article {
    margin-left: 155px;
}

@media only screen and (max-width: 1200px) {
    header, article {
        margin-left: 145px;
    }
}

@media only screen and (max-width: 1120px) {
    header, article {
        margin-left: 140px;
    }
}

@media only screen and (max-width: 1040px) {
    header, article {
        margin-left: 135px;
    }
}

@media only screen and (max-width: 960px) {
    header, article {
        margin-left: 130px;
    }
}

/* Sidebar - Responsive-ish */
#sidebar a {
    display: block;
}

@media only screen and (min-width: 650px) {
    #sidebar {
        font-variant: small-caps;
        padding: 0 40px 0 10px;
        width: 128px;
    }

    #sidebar a#logo {
        margin: 1em 0 2em 0;
        width: fit-content;
    }

    #sidebar a#logo svg {
        display: block;
        width: 128px;
    }

    #sidebar a.links::after, #sidebar a.mail::after {
        content: "";
        display: block;
        margin: 0.75em 0 0.375em 0;
        border-top: 1px dotted var(--sidebar-horizontal-rule-color);
    }
}

@media only screen and (max-width: 649px) {
    #sidebar {
        justify-content: center;
        margin: 0.75em 0 0.5em 0;
    }

    #sidebar a {
        border: 1px dotted var(--sidebar-mobile-link-border-color);
        padding: 0.25em 0.5em;
        text-align: center;
        margin: 1px;
    }

    #sidebar, #sidebar-links {
        display: flex;
    }

    #sidebar-links {
        flex-flow: row wrap;
        flex: 1 1 100%;
        margin: 0.5em 0 0 0;
    }

    #sidebar a#logo {
        margin: calc(0.5em + 1px) 1px 1px 0;
        padding: 0.5em 0.375em;
    }

    #sidebar a#logo svg {
        display: block;
        width: 2.5rem;
    }

    #sidebar a:not(#logo) {
        flex: 1 1 40%;
    }
}

table, code, pre, a, h1, h2, h3, h4, h5, h6 {
    font-variant-numeric: tabular-nums;
}

/*********/
/* LINKS */
/*********/
a {
    color: var(--body-link-color);
    /* off-black */
    text-decoration: none;
}

/*Slightly gray out links the reader has already visited, so they know ifthey’ve seen that content before. (A critical affordance in denselyhyperlinked longform.)*/
.markdownBody a:visited {
    color: var(--body-link-visited-color);
}

/*=------------------------=*/
/*= Fancy link underlining =*/
/*=------------------------=*/
/* Tufte CSS for underlining (https://github.com/edwardtufte/tufte-css)The advantage of all this CSS linenoise compared to the previous 'text-decoration: none;
border-bottom: 1px Solid grey;
' solution from http://devhints.wordpress.com/2006/10/24/css-links-with-different-color-underlines/is the 'skip-ink': when dealing with characters with 'descenders', like 'y', 'g', 'p', 'q' etc, with regular underlining the bottom stroke overlaps with the line and it's harder to read;
by adding this text-shadow stuff and backgrounding, a little break is made in the underline to add contrast and keep the descender fully visible and outlined. (The downside is that the overlapping text-shadows can also slightly damage the rendering of slashes & parentheses, which come too close and get partially erased.)Unfortunately, we don't want to add underlines to links in the TOC because it clutters it (all the lines are links and are in small font), so we have to avoid styling the TOC, which is difficult.I got around this by adding in the Hakyll template an additional <div> just for the body of the Markdown content, excluding the TOC, and changing the Tufte CSS to target *that* instead.May be able at some point to simplify this using regular link underlining, since CSS4's `text-decoration-skip-ink` by default avoids overlapping with text descenders (but as of Oct 2019, no Edge/IE or Safari support, and only the latest Firefox 70 supports it;
maybe in a few years...): https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink#Browser_Compatibility https://www.caniuse.com/#feat=mdn-css_properties_text-decoration-skip-ink (Right now, Firefox skip-ink looks quite bad: it doesn't skip enough ink, defeating the point, and also positions the underline badly!)*/
.markdownBody a:link, #footer a:link {
    text-decoration: none;
    background-image: linear-gradient(var(--link-underline-gradient-line-color), var(--link-underline-gradient-line-color));
    background-size: 1px 1px;
    background-repeat: repeat-x;
    background-position: 0% calc(100% - 0.1em);
    /* Disable oldstyle nums in underlined links because the oldstyle nums are almost subscript-like and overlap */
    font-variant-numeric: lining-nums;
}

.markdownBody a:link, .markdownBody a:link *, #footer a:link {
    text-shadow: 0 0.05em var(--link-underline-background-color), 0.05em 0.05em var(--link-underline-background-color), -0.05em 0.05em var(--link-underline-background-color), 0.17em 0.05em var(--link-underline-background-color), -0.17em 0.05em var(--link-underline-background-color), 0.17em 0 var(--link-underline-background-color), -0.17em 0 var(--link-underline-background-color);
}

.markdownBody a:hover {
    background-image: linear-gradient(var(--link-underline-gradient-line-color-hover), var(--link-underline-gradient-line-color-hover));
}

/* eliminate the blurring of headers and links when selecting by overriding the text-shadow: */
::selection {
    text-shadow: none;
    background: var(--text-selection-background-color);
    color: var(--text-selection-color);
}

/* Prevent code block background color and border from obscuring linkunderlining, for inline <code> elements in links.*/
a code {
    border-bottom-width: 0;
    word-break: normal;
    background-color: transparent;
}

/* Reduce text-shadow overlap partially erasing letters next to smallcaps:eg. in `<a href="https://www.microcovid.org/">"microCOVID project"</a>`,the ‘o’ in ‘micro’ will be partially erased and look like a ‘c’ withoutsome sort of extra spacing*/
.markdownBody a:link .smallcaps {
    margin-left: 0.8px;
}

/* Like above, but for subscripts and superscripts*/
.markdownBody a:link sub, .markdownBody a:link sup {
    padding: 0 0.05em;
}

/**************/
/* PARAGRAPHS */
/**************/
p {
    margin: 0;
    padding: 10px 0px;
}

p + p, p + figure[class^='float-'] + p, div[class^='drop-cap-'] + p, .abstract.scrape-abstract-not + p {
    text-indent: 2.5em;
}

@media only screen and (max-width: 649px) {
    p + p, p + figure[class^='float-'] + p, div[class^='drop-cap-'] + p, .abstract.scrape-abstract-not + p {
        text-indent: 1.75em;
    }
}

/***************/
/* BLOCKQUOTES */
/***************/
/*Additional blockquote styling done in default.css.*/
blockquote {
    --link-underline-background-color: var(--blockquote-background-color);
    margin: 1.625em 0 1.75em 0;
    border: 1px solid var(--blockquote-border-color);
    background-color: var(--blockquote-background-color);
    font-size: 0.95em;
    padding: 1em 1.25em;
}

/* Three-level of blockquote emphasis (darkening).*/
blockquote, blockquote blockquote blockquote blockquote {
    --blockquote-background-color: var(--blockquote-background-color-level-one);
}

blockquote {
    --blockquote-border-color: var(--blockquote-border-color-level-one);
}

blockquote blockquote blockquote blockquote {
    --blockquote-border-color: var(--blockquote-border-color-level-four);
}

blockquote blockquote, blockquote blockquote blockquote blockquote blockquote {
    --blockquote-border-color: var(--blockquote-border-color-level-two);
    --blockquote-background-color: var(--blockquote-background-color-level-two);
}

blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote {
    --blockquote-border-color: var(--blockquote-border-color-level-three);
    --blockquote-background-color: var(--blockquote-background-color-level-three);
}

/*=--------------------=*/
/*= Various edge cases =*/
/*=--------------------=*/
@media only screen and (min-width: 650px) {
    .abstract blockquote {
        overflow: hidden;
    }
}

@media only screen and (max-width: 649px) {
    /* even less horizontal is available on mobile! */
    blockquote {
        margin: 1.25em 0 1.5em 0;
        padding: 0.75em 1em;
    }
}

p + blockquote {
    margin-top: 1em;
}

blockquote > figure.float-right:first-child {
    margin-top: 0.375em;
}

/***************/
/* CODE BLOCKS */
/***************/
pre {
    overflow: auto;
    font-size: 10pt;
}

/* Full-width code blocks.*/
.full-width-code-block-wrapper {
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: auto;
    position: relative;
    z-index: 1;
}

.full-width-code-block-wrapper pre {
    padding-right: 1px;
}

/***************/
/* PAGE HEADER */
/***************/
header {
    overflow: auto;
    text-align: center;
    text-transform: none;
    font-variant: small-caps;
}

header h1 {
    margin: 0.75em 0;
    font-size: 2.5em;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -1px;
}

@media only screen and (max-width: 649px) {
    header h1 {
        font-size: 2em;
    }
}

/***********************/
/* PAGE METADATA BLOCK */
/***********************/
#page-metadata {
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

/* Override normal handling of italics: before, we wrapped descriptions in `<em>`;
however, they compile to HTML which can contain italics of their own (eg. book titles). This causes HTML Tidy to warn about nested italics (which is valid HTML but *usually* means you've made an error - this often triggers when I mess up bolding, for example, like on /GPT-3 ). So we removed the wrapper in favor of the above `font-style: italic`. However, now the titles don't unitalicize automatically like they would for nested italics! So we force italicized titles back to normal Roman font to match the expected typographic convention. */
#page-description {
    display: block;
    font-style: italic;
    text-align: justify;
}

#page-description em {
    font-style: normal;
}

#page-metadata > .link-tags {
    margin: 0 auto 0.25em auto;
}

#page-metadata > .link-tags a {
    white-space: nowrap;
}

#page-metadata > .link-tags a:nth-child(n+2) {
    margin: 0 0.05em 0 0.1em;
}

#page-metadata > .link-tags, #page-metadata-block {
    hyphens: none;
}

#page-metadata-block > span {
    white-space: nowrap;
}

/*Interpunct separators for the metadata fields;
looks nicer than semicolonsor slashes*/
#page-metadata-block > span:not(:last-child)::after {
    content: "\00B7";
    /* interpunct MIDDLE DOT (U+00B7) '·' */
    margin: 0 0.35em 0 0.65em;
}

@media only screen and (min-width: 650px) {
    #page-metadata {
        overflow: auto;
        font-size: calc((19 / 20) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 0.75em auto;
        hyphens: none;
    }

    #page-metadata-block, #page-metadata > .link-tags {
        font-size: calc((18 / 20) * var(--base-font-size));
    }

    #page-metadata-block br {
        display: none;
    }
}

@media only screen and (max-width: 649px) {
    #page-metadata {
        overflow: visible;
        font-size: calc((17 / 18) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 1em auto;
        line-height: calc(25 / 17);
    }

    #page-metadata > .link-tags, #page-metadata-block {
        text-align: center;
    }

    #page-metadata > .link-tags {
        margin: 0 auto 0.75em auto;
    }

    #page-metadata-block {
        font-size: calc((16 / 18) * var(--base-font-size));
        line-height: calc(25 / 16);
    }

    #page-metadata-block > #page-status::after, #page-metadata-block > #page-importance::after {
        content: none;
    }
}

/*=--------=*/
/*= /index =*/
/*=--------=*/
/*On the index page, we hide article-related formatting, begging, to make itmore compact & classy.*/
body.index #TOC, body.index #page-metadata, body.index header {
    display: none;
}

/* No index self-link. */
body.index #sidebar a#logo {
    pointer-events: none;
}

body.index #markdownBody section h1,
body.tags #markdownBody section h1,
body.categories #markdownBody section h1 {
    border-bottom: 1px dotted currentColor;
}

/* Columns.*/
/* Suppress bonus section in single/double-column layout */
body.index #markdownBody #notable {
    display: none;
}

@media only screen and (min-width: 961px) {
    body.index #markdownBody,
    body.tags #markdownBody,
    body.categories #markdownBody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2em;
        grid-row-gap: 0.5em;
    }

    body.index #markdownBody .abstract {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    body.index #markdownBody section > ul,
    body.tags #markdownBody section > ul,
    body.categories #markdownBody section > ul {
        margin: 0.75em 3em 0 0.25em;
    }
}

@media only screen and (max-width: 1040px) {
    body.index #markdownBody {
        grid-template-columns: 1fr;
    }

    body.index #markdownBody section > ul {
        column-count: 2;
        column-gap: 3em;
    }

    body.index #markdownBody section > ul li {
        break-inside: avoid;
    }
}

/*On sufficiently-wide screens, we can get 3 columns in nicely;
to preservethe initial row being ‘meta’ blocks, we leave #notable visible(for a newest/popular/notable triplet)*/
@media only screen and (min-width: 2050px) {
    body.index #markdownBody #notable {
        display: block;
    }

    body.index #markdownBody {
        grid-template-columns: 45ch 45ch 45ch;
    }
}

/* Abstract is not a real abstract, just an introduction, no need for theabstract formatting.*/
body.index .abstract {
    padding: 0;
    border: none;
    margin: 0;
    box-shadow: none;
}

/* Add some vertical padding for the introduction.*/
body.index #markdownBody {
    padding-top: 15px;
}

/* Headings on the home page.*/
body.index #markdownBody h1 {
    margin: 1.125em 0 0 0;
}

/* Lists on the home page.*/
body.index #markdownBody li, body.index #markdownBody li p {
    text-align: left;
}

body.index #markdownBody ul {
    margin: 1em 3em 0 0;
    padding: 0 0 0 1.375em;
}

body.index #markdownBody li > ul {
    margin: 0;
}

body.index #markdownBody li {
    margin-top: 0;
}

body.index #markdownBody ul > li:nth-of-type(n+2) {
    margin: 0;
}

@media only screen and (max-width: 649px) {
    body.index #markdownBody section {
        max-width: 100%;
    }

    body.index #markdownBody ul {
        overflow-wrap: break-word;
        margin-right: 0;
    }

    body.index #markdownBody li {
        padding: 1px 0;
        margin: 2px 0 0 0;
    }

    body.index #markdownBody ul > li::before {
        top: 0.25em;
    }
}

/*********************/
/* TABLE OF CONTENTS */
/*********************/
.toc {
    margin: 0 2rem 1.5rem 0;
    padding: 0.5em 0.5em 0.75em 0.75em;
    position: relative;
    z-index: 11;
}

.toc {
    border: 1px solid var(--TOC-border-color);
    background-color: var(--TOC-background-color);
    font-family: var(--sans-serif-font-stack);
    line-height: 1.25;
}

.toc:empty {
    display: none;
}

/* On mobile, we want the TOC to be inline, but for desktop, we want itside by side with the content.*/
@media only screen and (max-width: 1280px) {
    .toc {
        font-size: 0.95rem;
    }
}

@media only screen and (max-width: 1200px) {
    .toc {
        font-size: 0.90rem;
    }
}

@media only screen and (max-width: 1120px) {
    .toc {
        font-size: 0.85rem;
        margin: 0 1.5rem 1.25rem 0;
    }
}

@media only screen and (max-width: 1040px) {
    .toc {
        font-size: 0.80rem;
        margin: 0 1.25rem 1rem 0;
    }
}

@media only screen and (max-width: 960px) {
    .toc {
        margin: 0 1rem 1rem 0;
    }
}

@media only screen and (min-width: 901px) {
    .toc {
        float: left;
        max-width: 285px;
    }
}

@media only screen and (max-width: 900px) {
    .toc {
        float: none;
        clear: both;
        margin: 2em auto;
        font-size: 1rem;
    }

    .toc {
        padding: 0.5em;
    }

    .toc li {
        padding-left: 0;
    }

    .toc ul li::before {
        content: none;
    }

    .toc > ul {
        column-count: 2;
        margin: 0;
        column-gap: 1.25em;
    }

    .toc {
        background-image: linear-gradient(var(--TOC-border-color), var(--TOC-border-color));
        background-repeat: no-repeat;
        background-size: 1px 100%;
        background-position: 50% 0;
    }
}

@media only screen and (max-width: 649px) {
    .toc a {
        display: inline-block;
    }

    .toc > ul > li > ul {
        column-count: 1;
    }

    .toc li li a {
        padding: 0 0 1px 0;
    }

    .toc li li li a {
        padding: 0 0 2px 0;
    }

    .toc li li li li a {
        padding: 0 0 3px 0;
    }

    .toc li li li li a {
        padding: 0 0 4px 0;
    }
}

/*=-----------------=*/
/*= TOC list layout =*/
/*=-----------------=*/
.toc ul {
    list-style-type: none;
    padding-left: 0em;
    margin-bottom: 0;
    margin-top: 0.2em;
    padding-left: 1.4em;
    text-indent: 0;
    padding: 0;
    overflow: unset;
}

.toc ul ul {
    list-style-type: none;
    padding-left: 0.7em;
    padding-top: 0.25em;
    margin-top: 0.1em;
}

.toc li {
    font-weight: bold;
    margin: 0 0 0.5em 0;
    padding-left: 1.125em;
    position: relative;
    overflow-wrap: break-word;
}

.toc li:first-child {
    break-before: avoid-column;
}

.toc li li {
    margin-bottom: 0.25em;
    font-weight: normal;
    font-size: 0.9em;
}

.toc li li:last-child {
    margin-bottom: 0;
}

.toc p {
    margin-top: 0.5em;
    margin-bottom: 0.1em;
}

/*=------------------=*/
/*= TOC link styling =*/
/*=------------------=*/
.toc a {
    border: 0;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0 0.25rem 0 0;
}

/*=--------------------------=*/
/*= Inline code in TOC links =*/
/*=--------------------------=*/
.toc code {
    font-family: inherit;
    font-size: inherit;
    border: none;
    padding: 0;
    background-color: inherit;
}

/*=-------------------------------=*/
/*= Wikipedia-style TOC numbering =*/
/*=-------------------------------=*/
.toc > ul {
    counter-reset: htoc_1;
}

.toc > ul > li::before {
    counter-increment: htoc_1;
    content: counter(htoc_1) "\2006 ";
}

.toc > ul ul {
    counter-reset: htoc_2;
}

.toc > ul ul li::before {
    counter-increment: htoc_2;
    content: counter(htoc_1) "." counter(htoc_2) "\2006 ";
}

.toc > ul ul ul {
    counter-reset: htoc_3;
}

.toc > ul ul ul li::before {
    counter-increment: htoc_3;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "\2006 ";
}

.toc > ul ul ul ul {
    counter-reset: htoc_4;
}

.toc > ul ul ul ul li::before {
    counter-increment: htoc_4;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "\2006 ";
}

.toc > ul ul ul ul ul {
    counter-reset: htoc_5;
}

.toc > ul ul ul ul ul li::before {
    counter-increment: htoc_5;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "." counter(htoc_5) "\2006 ";
}

.toc > ul ul ul ul ul ul {
    counter-reset: htoc_6;
}

.toc > ul ul ul ul ul ul li::before {
    counter-increment: htoc_6;
    content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "." counter(htoc_5) "." counter(htoc_6) "\2006 ";
}

.toc ul li::before {
    position: absolute;
    right: calc(100% - 1em);
    left: unset;
    width: 111px;
    text-align: right;
    font-weight: normal;
    pointer-events: none;
    color: var(--TOC-number-color);
}

.toc ul li:hover::before {
    color: var(--TOC-number-hover-color);
}

/*The table of contents is a *table*, so align*/
.toc {
    font-variant-numeric: tabular-nums;
}

/****************/
/* MAIN CONTENT */
/****************/
.markdownBody {
    /* Try to avoid scrollbars on paragraphs: prevents long unbrokenun-hyphenatable lines from causing H-scrolling*/
    overflow-wrap: break-word;
}

/* Breakpoint for sidenotes.*/
@media only screen and (min-width: 1761px) {
    #markdownBody {
        position: relative;
    }
}

@media only screen and (min-width: 650px) {
    @media only screen and (max-width: 1000px) {
        /* Replaces A/B-test-set average value;
        the wider the screen, the moreline-height is necessary, and no one size suits all, so set 3brackets of increasing height.*/
        .markdownBody {
            line-height: 1.50;
        }
    }
    @media only screen and (min-width: 1001px) and (max-width: 1200px) {
        .markdownBody {
            line-height: 1.55;
        }
    }
    @media only screen and (min-width: 1201px) {
        .markdownBody {
            line-height: 1.60;
        }
    }
}

@media only screen and (max-width: 649px) {
    .markdownBody {
        line-height: 1.45;
    }
}

/* On wide screens (desktop), use fully-justified text (words getbroken/hyphenated as necessary to avoid a ‘ragged margin’), overridingbrowser default of ‘flush left, ragged right’ (seehttps://en.wikipedia.org/wiki/Typographic_alignment#Flush_left )On mobile/narrow screens, that doesn’t work as well: because browsers dogreedy layout, justification forces ‘s t r e t c h e d out’ wordsand large spaces, leading to blatanthttps://en.wikipedia.org/wiki/River_(typography) , getting worse thenarrower the screen (eg. in lists). On wide screens, it isn’t too bad, andjustification is still better than not, but on mobile it is extremelynoticeable. Switching to flush left ragged right doesn’t look as nicely‘even’, but it avoids that pathological behavior. (More advanced typesettingalgorithms like Knuth-Plasshttps://en.wikipedia.org/wiki/Line_wrap_and_word_wrap#Minimum_raggednesscan handle mobile widths nicely, but no contemporary browser implements themnatively, and all JS implementations I’ve looked at are buggy.)However, do hyphenate at all widths.*/
.markdownBody p, .markdownBody li {
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media only screen and (min-width: 900px) {
    .markdownBody p, .markdownBody li {
        text-align: justify;
    }

    .markdownBody .TOC li {
        text-align: left;
    }
}

/* Cute ‘old-style’ numerals, look a little nicer inline in text, and availablenatively in the SS fonts:https://practicaltypography.com/alternate-figures.html#oldstyle-figures*/
.markdownBody {
    font-variant-numeric: oldstyle-nums;
}

.abstract > blockquote {
    margin: 0 0 1.5em 0;
    background-color: var(--abstract-background-color);
    border-color: var(--abstract-border-color);
    padding: 0.9rem 1.25rem 0.95rem 1.25rem;
    clear: none;
}

@media only screen and (max-width: 649px) {
    .abstract blockquote {
        padding: 0.75rem 1rem 0.8rem 1rem;
    }
}

/*Auto-smallcaps the first line of the introduction (= the first `<p>` afteran ‘abstract’ div);
this avoids the need to manually specify what tosmallcaps, and it auto-adjusts to screen/line-width, which is nicer.*/
.abstract + p::first-line,
#markdownBody > p:first-child::first-line,
.markdownBody #page-metadata + p::first-line {
    font-feature-settings: 'smcp';
    font-size: 30px;
}

h1 {
    margin: 0.6em 0 0.5em -0.75rem;
    font-weight: bold;
    position: relative;
}

@media only screen and (max-width: 649px) {
    h1 {
        margin: 1.25em 0 0.5em 0;
        padding-bottom: 2px;
    }
}

/* Lazy-load below-fold sections in supported browsers.Disabled temporarily pending layout redesign to compensate for layoutcontainment. —Obormot 2021-03-21*/
/*section.level1:nth-of-type(n+4) {
	content-visibility: auto;
	contain-intrinsic-size: 200vh;
}
*/
/*=----------------=*/
/*= Heading levels =*/
/*=----------------=*/
h1 {
    font-feature-settings: 'smcp';
    font-size: 1.75em;
    line-height: 1.25;
    letter-spacing: -0.75px;
}

/*************/
/* SIDENOTES */
/*************/
/* Hide sidenote columns on narrow viewports.*/
@media only screen and (max-width: 1760px) {
    #sidenote-column-left, #sidenote-column-right {
        display: none;
    }
}

/*=--------------=*/
/*= Margin notes =*/
/*=--------------=*/
/* On wide viewports, hide the margin notes until it is styled as a sidenote (i.e,until it gets the `.sidenote` class applied to it).*/
@media only screen and (min-width: 1761px) {
    .marginnote {
        display: none;
    }
}

/********/
/* MISC */
/********/
/* Enable standard Pandoc attribute-based syntax for small-caps like ‘[foo]{.smallcaps }’
see https://pandoc.org/MANUAL.html#small-caps*/
span.smallcaps {
    font-feature-settings: 'smcp';
}

/*  Figures in sidenotes should take up the full width of the sidenote.
    */
.sidenote figure {
    margin: 1.5em auto;
    max-width: calc(100% - 2px);
}

/*************/
/* SIDENOTES */
/*************/

#sidenote-column-left,
#sidenote-column-right {
    position: absolute;
    max-width: var(--sidenotes-max-width);
    font-size: 0.85em;
    z-index: 1;
    pointer-events: none;
}

#sidenote-column-left > *,
#sidenote-column-right > * {
    pointer-events: auto;
}

#sidenote-column-left {
    height: calc(100% - 10rem);
    width: calc(50vw - (50% + 92px));
    top: 10rem;
    right: calc(100% + 64px);
}

#sidenote-column-right {
    height: 100%;
    width: calc(50vw - (50% + 104px));
    top: 0;
    left: calc(100% + 60px);
}

/*=-----------------=*/
/*= Sidenote blocks =*/
/*=-----------------=*/

.sidenote {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.85;
    line-height: 1.5;
    padding: 2em 0 0 0;
}

.sidenote.hidden {
    display: none;
}

.sidenote.highlighted,
.sidenote:hover,
.sidenote:target,
.sidenote.targeted {
    background-color: var(--sidenote-highlight-background-color);
    opacity: 1.0;
}

.sidenote:target {
    z-index: 1;
}

.sidenote.highlighted,
.sidenote:hover {
    z-index: 2;
}

/*  This provides a solid hover margin.
    */
.sidenote::after {
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -13px;
    left: -13px;
}

.sidenote.highlighted::after,
.sidenote:hover::after,
.sidenote:target::after,
.sidenote.targeted::after {
    border: 3px double var(--sidenote-highlight-box-shadow-color);
}

/*=-------------------=*/
/*= Sidenote wrappers =*/
/*=-------------------=*/

/*  Outer wrapper (scrolls).
    */
.sidenote-outer-wrapper {
    /* max-height is set inline, in sidenotes.js */
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-style: dotted;
    border-color: var(--sidenote-border-color);
    border-width: 1px 0;
}

.sidenote.cut-off .sidenote-outer-wrapper {
    overflow-y: auto;
    overscroll-behavior: none;
    width: 100%;
    padding: 0 1px 0 0;
    padding-right: 0.5em;
}

/*  Scroll bar styles (for WebKit/Chromium).
    */
.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
    width: 12px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7');
    box-shadow: 0 0 0 2px var(--sidenote-scrollbar-track-color) inset;
    background-size: 2px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb:hover {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
}

/*  Scroll bar styles (for Firefox).
    */
.sidenote.cut-off .sidenote-outer-wrapper {
    scrollbar-color: var(--sidenote-scrollbar-thumb-color) var(--sidenote-scrollbar-track-color);
}

.sidenote.cut-off .sidenote-outer-wrapper:hover {
    scrollbar-color: var(--sidenote-scrollbar-thumb-hover-color) var(--sidenote-scrollbar-track-color);
}

/*  Inner wrapper (does not scroll; stretches to height of content).
    */
.sidenote-inner-wrapper {
    position: relative;
    margin: 0.5em 0;
}

/*  Ensure content is interactable.
    */
.sidenote-inner-wrapper > * {
    position: relative;
    z-index: 1;
}

/*=--------------------------------------=*/
/*= Sidenote contents layout corrections =*/
/*=--------------------------------------=*/

.sidenote blockquote {
    margin: 1.5em 0 0.75em 0;
}

.sidenote pre {
    margin: 1.75em 0 0.75em 0;
}

.sidenote blockquote + *,
.sidenote pre + * {
    margin-top: 1.75em;
}

.sidenote p + p {
    text-indent: 1.25em;
}

#markdownBody .sidenote ul,
#markdownBody .sidenote ol {
    padding: 0 0 0 1.75em;
}

#markdownBody .sidenote li {
    text-align: left;
}

/*=-------------------------------=*/
/*= Sidenote self-links (numbers) =*/
/*=-------------------------------=*/

.sidenote > .sidenote-self-link {
    font-weight: 600;
    position: absolute;
    top: 0;
    border-style: dotted;
    border-color: var(--sidenote-self-link-border-color);
    border-width: 1px 1px 0px 1px;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*  Disable link underlining.
    */
.markdownBody .sidenote > .sidenote-self-link {
    background-image: none;
}

#sidenote-column-left .sidenote > .sidenote-self-link {
    right: 0;
}

#sidenote-column-right .sidenote > .sidenote-self-link {
    left: 0;
}

/*=------------=*/
/*= Edge cases =*/
/*=-------------=*/

.sidenote .footnote-self-link {
    display: none;
}

.footnotes .sidenote .footnote-back {
    vertical-align: text-top;
}

.footnotes .sidenote blockquote + a.footnote-back,
.footnotes .sidenote pre + a.footnote-back,
.footnotes .sidenote .sourceCode + a.footnote-back {
    top: unset;
    bottom: 0;
}

/*=--------------=*/
/*= Margin notes =*/
/*=--------------=*/
/* display inline on mobile/narrow windows; on sufficiently-wide screens, pop out as number-less sidenotes */

.marginnote {
    /* bolding turns out to be too obtrusive for users' liking; italicized both inline & popped-out */
    font-style: italic;
    color: var(--body-text-color);
    font-family: var(--serif-font-stack);
}

.marginnote.inline {
    color: inherit;
}

.marginnote.sidenote {
    display: initial;
    /*  965px because that’s the width of #markdownBody at the widths where we
        get margin notes. Someday, find a way to auto-compute this (but note
        that `50%` doesn’t work in place of `(965px / 2)`; it breaks when the
        margin note is within a narrower block, like a <p> within an <ol>).
        —SA 2022-03-28
     */
    width: calc(50vw - ((965px / 2) + 104px));
    max-width: var(--sidenotes-max-width);
    left: calc(100% + 60px);

    /*  We inherit left and right padding from .sidenote class. */
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    font-size: calc(var(--body-text-font-size) * 0.85);
    text-align: left;
    text-indent: 0;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    opacity: 0.85;
    z-index: 1;
}

.marginnote.sidenote:hover {
    box-shadow: none;
}

/* make links in margin notes (somewhat unusual but should be supported simply because that's what one would expect) clickable/hover-able */
.sidenote.marginnote::after {
    z-index: -1;
}

/*  Margin notes within admonitions need special layout.
    This is based on the width of the admonition icon area.
    */
.admonition .marginnote.sidenote {
    width: calc(50vw - ((100% + (2.875em / (0.85 / 0.875))) / 2 + 104px));
}

/********/
/* MISC */
/********/

/* Hanging Punctuation https://en.wikipedia.org/wiki/Hanging_punctuation
   Microtypography: paragraphs starting/ending in quote marks outdent the quote slightly, so the paragraph continues to line up.
   This is most noticeable in epigraphs and blockquotes. Minor, but nice.
   CSS standard: https://www.w3.org/TR/css-text-3/#propdef-hanging-punctuation
   Supported only in Safari https://caniuse.com/css-hanging-punctuation https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation#browser_compatibility but that has 18% market share, which is not nothing. */
p {
    hanging-punctuation: first last;
}

/*  LaTeX/TeX: Format the logotypes correctly (a higher up, e lower)
    (borrowed from https://latex.now.sh/ )
    */
.latex span:nth-child(1) {
    text-transform: uppercase;
    font-size: 0.76em;
    vertical-align: 0.25em;
    margin-left: -0.30em;
    margin-right: -0.08em;
    line-height: 1ex;
}

.latex span:nth-child(2) {
    text-transform: uppercase;
    vertical-align: -0.5ex;
    margin-left: -0.160em;
    margin-right: -0.120em;
    line-height: 1ex;
}

.logotype-tex sub {
    text-transform: uppercase;
    vertical-align: -0.50ex;
    margin-left: -0.1em;
    margin-right: -0.1em;
    font-size: 1em;
}

/*  Prevent text-shadow of italics in links from creating visual glitches
    (also fixes occasional link icon overlaps, eg. a WP link to 'MGS:V' where
    the right-tilted 'V' would touch the WP 'W' link icon).
    */
.markdownBody em {
    margin-right: 0.1em;
}

/*  SUPERSCRIPT+SUBSCRIPT (necessary for inflation adjuster, and other math)
    */
.supsub {
    display: inline-block;
    margin-left: 0.1em;
    text-indent: initial; /* override the `p + p { text-indent: 2.5em; }` */
}

.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: 0.7em;
    line-height: 0.7;
}

.supsub sub {
    top: .2em;
}

/*  Make sure that adjusted prices move as a block: no breaking in the middle between the price & sup/sub; this works better than trying to use no-break Unicode entities
    */
span.inflationAdjusted {
    white-space: nowrap;
}

span.link-tags a,
span.aux-links a,
span.backlinks a,
span.similars a,
span.link-bibliography a {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

/*************/
/* DROP CAPS */
/*************/
/*  "drop caps"/"initials" (https://en.wikipedia.org/wiki/Initial
    https://wiki.obormot.net/Reference/DropCapsDemo) are large fancy
    block letters used to start a page/section.
    The 5 drop-caps right now are Cheshire ('drop-caps-cheshire') (https://www.dafont.com/cheshire-initials.font), Goudy Initialen (https://www.1001fonts.com/goudy-initialen-font.html)
    ('drop-caps-goudy'), yinit (https://www.tug.org/TUGboat/tb12-1/tb31hara.pdf#page=8) ('drop-caps-yinit'), Kanzlei Initialen ('drop-caps-kanzlei') (https://wiki.obormot.net/Main/BonusFontsDemo?demo_font_one=Kanzlei+Initialen), and
    De-Zs/Deutsche Zierschrift (https://www.typografie.info/3/Schriften/fonts.html/deutsche-zierschrift-r250/) ('drop-caps-de-zs').
    Drop-caps are used to subtly 'theme' pages: Cheshire is for literary pages, Goudy is for
    historical/humanities pages, Kanzlei is for light technical/scientific pages, while yinit is for hardcore technical/scientific
    pages (if it has a lot of equations, it's yinit), and De-Zs is for everything else (such as newsletters).
    We use them on desktop & skip them on mobile because
    they use up 8-12KB each (even after @font-face subset optimization to load
    only 1 letter at a time), and take up a lot of screen space.
    (Mobile users can't have nice things.)
    To implement them, each Markdown
    page has a custom metadata field like "css: drop-caps-goudy" which is
    substituted into the compiled HTML like
    '<body class="pagename drop-caps-goudy">', allowing defining of multiple
    drop-caps and customized per page. The body class then is read by JS
    (currently: `rewrite.js` l841, the `dropCapBlocksSelector` variable) which
    actually sets it on relevant paragraphs. It would be difficult to define 'first paragraph'
    at the start of the page correctly without many special-case pure-CSS selectors.
    (Drop-caps in arbitrary manually-specified places, like appendices or split-out articles,
    are supported by a separate 'drop-cap' singular class which can wrap either the abstract
    or a specific <p>.)
    */
@media only screen and (min-width: 650px) {
    *[class*='drop-cap-']::first-letter,
    *[class*='drop-cap-'] > p:first-child::first-letter {
        font-style: normal;
        font-weight: normal;
        float: left;
	margin: 18px 10px 0 0;
    }

    /*  All of these numbers are magic.
        */
    .drop-cap-carrick::first-letter,
    .drop-cap-carrick > p:first-child::first-letter {
        font-family: "Apex";
        font-size: 7em;
        line-height: 1;
/*        margin: 18px 4px 0 0;*/
    }

    .drop-cap-apex::first-letter,
    .drop-cap-apex > p:first-child::first-letter {
        font-family: "Apex";
        font-size: 7em;
        line-height: 1;
/*        margin: 18px 4px 0 0;*/
    }

    .drop-cap-typo::first-letter,
    .drop-cap-typo > p:first-child::first-letter {
        font-family: "Typographer";
        font-size: 5.625em;
        line-height: 1.35;
/*        margin: 0.07em 0.08em -0.5em 0;*/
        text-shadow: 0 0 0 var(--drop-caps-typo-text-shadow-color);
        color: var(--drop-caps-typo-color);
    }

    .drop-cap-reta::first-letter,
    .drop-cap-reta > p:first-child::first-letter {
        font-family: "Retacaps";
        font-size: 6.625em;
        line-height: 1.1;
/*        margin: 0.01em 0.03em -0.25em 0;*/
        color: var(--drop-caps-reta-color);
    }

    .drop-cap-camelot::first-letter,
    .drop-cap-camelot > p:first-child::first-letter {
        font-family: "Camelot Caps";
        font-size: 6.75em;
        line-height: 1;
/*        margin: 0.045em 0.05em -0.25em 0;*/
        color: var(--drop-caps-camelot-color);
    }

    .drop-cap-royal::first-letter,
    .drop-cap-royal > p:first-child::first-letter {
        font-family: "Royal Initialen";
        font-size: 7em;
        line-height: 1;
/*        margin: 0.025em 0.025em -0.25em -0.03em;*/
        color: var(--drop-caps-royal-color);
    }
}

/*  Compensating for responsive line-height reduction.
    */
@media only screen and (max-width: 1200px) {
    .drop-cap-carrick::first-letter,
    .drop-cap-carrick > p:first-child::first-letter {
        font-size: 6.875em;
    }

    .drop-cap-typo::first-letter,
    .drop-cap-typo > p:first-child::first-letter {
        font-size: 5.375em;
    }

    .drop-cap-reta::first-letter,
    .drop-cap-reta > p:first-child::first-letter {
        font-size: 6.5em;
    }

    .drop-cap-camelot::first-letter,
    .drop-cap-camelot > p:first-child::first-letter {
        font-size: 6.625em;
    }

    .drop-cap-royal::first-letter,
    .drop-cap-royal > p:first-child::first-letter {
        font-size: 6.875em;
    }
}

@media only screen and (max-width: 1000px) {
    .drop-cap-carrick::first-letter,
    .drop-cap-carrick > p:first-child::first-letter {
        font-size: 6.625em;
    }

    .drop-cap-typo::first-letter,
    .drop-cap-typo > p:first-child::first-letter {
        font-size: 5.25em;
    }

    .drop-cap-reta::first-letter,
    .drop-cap-reta > p:first-child::first-letter {
        font-size: 6.25em;
    }

    .drop-cap-camelot::first-letter,
    .drop-cap-camelot > p:first-child::first-letter {
        font-size: 6.3125em;
    }

    .drop-cap-royal::first-letter,
    .drop-cap-royal > p:first-child::first-letter {
        font-size: 6.6875em;
    }
}

/*  Special styles for special browsers.
    */
@supports (-moz-user-focus: normal) {
    .drop-cap-carrick::first-letter,
    .drop-cap-carrick > p:first-child::first-letter {
        margin: 15px 4px 0 0;
    }

    .drop-cap-apex::first-letter,
    .drop-cap-apex > p:first-child::first-letter {
        margin: 15px 4px 0 0;
    }

    .drop-cap-typo::first-letter,
    .drop-cap-typo > p:first-child::first-letter {
        margin: 0.06em 0.06em 0 0;
    }

    .drop-cap-reta::first-letter,
    .drop-cap-reta > p:first-child::first-letter {
        margin: 0.06em 0.04em 0 0;
    }

    .drop-cap-camelot::first-letter,
    .drop-cap-camelot > p:first-child::first-letter {
        margin: 0.06em 0.04em 0 0;
    }

    .drop-cap-royal::first-letter,
    .drop-cap-royal > p:first-child::first-letter {
        margin: 0.05em 0.02em 0 -0.03em;
    }
}

/*****************/
/* MULTI-COLUMNS */
/*****************/
/* Inspired by Markdeep (https://casual-effects.com/markdeep/features.md.html#multiplecolumns); limited multi-column support as a div class annotation */
/* This is particularly useful for extremely long ('skinny') lists where items tend to be short, such as in /DNM-archives#overall-coverage or /Replication */
/* Uses CSS3 columns: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://www.caniuse.com/#feat=multicolumn */
/* Currently limited to lists due to issues with hidden:overflow in FF and sidenotes.js in Chrome. */
.columns > ul,
.columns > ol {
    column-width: 15em;
    column-gap: 3em;
    margin-bottom: 2em;

    /*  Without `clear`, columns don’t render properly if there’s a float.
     */
    clear: both;
}

.markdownBody .columns li,
.markdownBody .columns li p {
    text-align: left;
    break-inside: avoid;
}

.columns > ul figure {
    margin: 0 0 1.5em 0;
}

/***************/
/* ADMONITIONS */
/***************/
/* Highlighted boxes: 'admonitions' are small break-out boxes with notes, tips, warnings, etc. for the reader.  */
/* These are particularly useful in didactic technical writing, where there are many ways to slip up while using or coding something. */
/* Available (in increasing order of minatoriness): 'tip', 'note', 'warning', 'error'. */
/* Based on Markdeep's implementation: https://casual-effects.com/markdeep/features.md.html#basicformatting/admonitions (which appears loosely inspired by Wikipedia's notification templates like `{{NPOV}}`) */
/* and modified to grayscale (increasing intensity == increasing warning) for Gwern.net. */
/* Usage examples: */
/* - <div class="admonition tip"><div class="admonition-title">Tip title (optional)</div> text</div> */
/* - <div class="admonition note"><div class="admonition-title">Note title (*)</div> text</div> */
/* - <div class="admonition warning"><div class="admonition-title">Warning title (*)</div> text</div> */
/* - <div class="admonition error"><div class="admonition-title">Error title (*)</div> text</div> */
.admonition {
    --admonition-background-color: var(--admonition-default-background-color);
    --admonition-left-border-color: var(--admonition-default-left-border-color);
    --admonition-text-color: currentColor;

    --link-underline-background-color: var(--admonition-background-color);

    font-family: var(--serif-font-stack);
    font-size: 0.875em;
    color: var(--admonition-text-color);
    position: relative;
    margin: 2em 0 1.5em 0;
    padding: 0.75em 1.25em 0.875em 1.125em;
    border-left: 4.875em solid var(--admonition-left-border-color);
    background-color: var(--admonition-background-color);
}

.admonition-title .smallcaps {
    font-feature-settings: 'smcp';
    font-variant: small-caps;
}

.admonition-title {
    font-weight: bold;
}

.admonition.tip {
    --admonition-background-color: var(--admonition-tip-background-color);
    --admonition-left-border-color: var(--admonition-tip-left-border-color);
}

.admonition.warn,
.admonition.warning {
    --admonition-background-color: var(--admonition-warning-background-color);
    --admonition-left-border-color: var(--admonition-warning-left-border-color);
    --admonition-text-color: var(--admonition-warning-text-color);
}

.admonition.error {
    --admonition-background-color: var(--admonition-error-background-color);
    --admonition-left-border-color: var(--admonition-error-left-border-color);
    --admonition-text-color: var(--admonition-error-text-color);
}

.admonition.meme,
.admonition.memetic {
    --admonition-background-color: rgb(138, 81, 81);
    --admonition-left-border-color: var(--admonition-warning-left-border-color);
    --admonition-text-color: var(--admonition-warning-text-color);
}

.admonition::before {
    width: 4.875em;
    height: 100%;
    position: absolute;
    right: 100%;
    padding: 0.60em;
    box-sizing: border-box;
}

.admonition.tip::before {
    content: url('/static/images/icons/info-circle.svg');
}

.admonition.note::before {
    content: url('/static/images/icons/arrow-right-white.svg');
    padding: 0.85em;
}

.admonition.warn::before,
.admonition.warning::before {
    content: url('/static/images/icons/exclamation-triangle-white.svg');
    padding-top: 0.75em;
}

.admonition.error::before {
    content: url('/static/images/icons/skull-crossbones-white.svg');
    padding: 0.75em;
}

.admonition.meme::before,
.admonition.memetic::before {
    content: url('/static/images/icons/hazard-meme.svg');
    padding-top: 0.75em;
}

.admonition p:last-child {
    margin-bottom: 0;
}

.admonition code {
    --code-element-background-color: transparent;

    border: none;
    padding-left: 0;
    font-size: unset;
}

.admonition .footnote-ref {
    text-shadow: none;
}

.admonition.warn,
.admonition.warning,
.admonition.error {
    --link-underline-gradient-line-color: var(--admonition-reversed-link-underline-gradient-line-color);
    --link-underline-gradient-line-color-hover: var(--admonition-reversed-link-underline-gradient-line-color-hover);
    --footnote-ref-highlight-background-color: var(--admonition-reversed-footnote-ref-highlight-background-color);
}

.admonition.warn,
.admonition.warning {
    --dotted-underline-background-image: url('data:image/gif;base64,R0lGODlhBAACAPAAMZqamv///ywAAAAABAACAAACBEwAhgUAOw==');
}

.admonition.error {
    --dotted-underline-background-image: url('data:image/gif;base64,R0lGODlhBAACAPAAMVpaWv///ywAAAAABAACAAACBEwAhgUAOw==');
}

.admonition.warn a,
.admonition.warning a,
.admonition.error a {
    color: var(--admonition-reversed-link-color);
}

.admonition.warn a:hover,
.admonition.warning a:hover,
.admonition.error a:hover {
    color: var(--admonition-reversed-link-color-hover);
}

/*  Admonitions in/as page abstracts (e.g. /Archiving-GitHub).
 */
.abstract .admonition {
    border-left-width: 0;
    padding-left: 4em;
    box-shadow: 2.875em 0 0 0 var(--admonition-left-border-color) inset;
}

.abstract .admonition::before {
    right: unset;
    left: 0;
}

/*************************/
/* UI ELEMENTS CONTAINER */
/*************************/

#ui-elements-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

#ui-elements-container > * {
    pointer-events: auto;
}

/********************/
/* BACK-TO-TOP LINK */
/********************/

#back-to-top {
    position: absolute;
    bottom: 0.75rem;
    opacity: 1.0;
    visibility: visible;
    transition: opacity 2s ease,
    visibility 2s ease;
}

#back-to-top.hidden {
    opacity: 0;
    visibility: hidden;
}

#back-to-top a {
    display: block;
    width: 1.25em;
    color: var(--back-to-top-link-color);
    filter: drop-shadow(0 0 1px var(--body-background-color)) drop-shadow(0 0 1px var(--body-background-color)) drop-shadow(0 0 1px var(--body-background-color));
}

#back-to-top a:hover {
    color: var(--back-to-top-link-hover-color);
}

#back-to-top svg {
    display: block;
    width: 100%;
}

@media only screen and (max-width: 1184px) {
    #back-to-top {
        left: 4rem;
    }
}

@media only screen and (min-width: 1185px) {
    #back-to-top {
        right: 1rem;
    }
}

@media only screen and (min-width: 1761px) {
    #back-to-top {
        left: unset;
        right: calc(60px + (100% - 1185px) / 2);
    }
}

@media only screen and (max-width: 649px) {
    #back-to-top {
        left: unset;
        right: 1rem;
        bottom: 1rem;
    }

    #back-to-top a {
        width: 1.5em;
        border: 2px solid currentColor;
        background-color: var(--body-background-color);
        padding: 0.125em 0.25em;
    }
}

svg {
    fill: currentColor;
}

/*********/
/* LISTS */
/*********/

ul,
ol {
    list-style-type: none;
    margin: 1.25em 0 1.5em 0;
    padding: 0 0 0 2.5em;
}

#markdownBody ul,
#markdownBody ol {
    display: flow-root;
}

li > ul,
li > ol {
    margin: 0.5em 0;
}

ul > li,
ol > li {
    position: relative;
    margin: 0;
}

ul > li:nth-of-type(n+2),
ol > li:nth-of-type(n+2) {
    margin: 0.5em 0 0 0;
}

ul > li::before {
    position: absolute;
    z-index: 1;
}

:not(ul):not(ol) > li {
    list-style-type: none;
}

@media only screen and (max-width: 649px) {
    ul,
    ol {
        padding: 0 0 0 1.75em;
    }
}

ul ul:last-child,
ul ol:last-child,
ol ol:last-child,
ol ul:last-child {
    margin-bottom: 0;
}

p + ul,
p + ol {
    margin-top: 0.5em;
}

/*=-----------------------=*/
/*= Bulleted list markers =*/
/*=-----------------------=*/
/* NOTE: should be able to simplify list markers ~2026 using ::marker, see https://web.dev/css-marker-pseudo-element/ https://www.caniuse.com/css-marker-pseudo */
ul > li::before {
    display: block;
    left: -1.375em;
    width: 0.75em;
}

ul > li::before,
ul ul ul ul > li::before {
    content: url('/static/images/icons/single-black-star.svg');
    opacity: 0.72;
    filter: invert();
}

ul ul > li::before,
ul ul ul ul ul > li::before,
    /* special /index override because the link compilation is not bolded */
body.index ul > li::before {
    content: url('/static/images/icons/single-white-star.svg');
    opacity: initial;
    filter: invert();
}

ul ul ul > li::before,
ul ul ul ul ul ul > li::before,
body.index ul ul > li::before {
    /* this rotates into more of a 'lozenge' square for variety's sake */
    content: url('/static/images/icons/single-white-star-rotated.svg');
    opacity: initial;
    filter: invert();
}

/*=-----------------------=*/
/*= Numbered list markers =*/
/*=-----------------------=*/

ol,
ol ol ol ol {
    list-style-type: decimal;
}

ol li::marker {
    font-feature-settings: 'onum';
}

ol ol,
ol ol ol ol ol {
    list-style-type: upper-roman;
}

ol ol ol,
ol ol ol ol ol ol {
    list-style-type: lower-alpha;
}

/*=------------------=*/
/*= Weird edge cases =*/
/*=------------------=*/

li > ul + p,
li > ol + p {
    margin-top: 1em;
}

/***********************/
/* PAGE METADATA BLOCK */
/***********************/

#page-metadata {
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

/* Override normal handling of italics: before, we wrapped descriptions in `<em>`; however, they compile to HTML which can contain italics of their own (eg. book titles). This causes HTML Tidy to warn about nested italics (which is valid HTML but *usually* means you've made an error - this often triggers when I mess up bolding, for example, like on /GPT-3 ). So we removed the wrapper in favor of the above `font-style: italic`. However, now the titles don't unitalicize automatically like they would for nested italics! So we force italicized titles back to normal Roman font to match the expected typographic convention. */
#page-description {
    display: block;
    font-style: italic;
    text-align: justify;
}

#page-description em {
    font-style: normal;
}

#page-metadata > .link-tags {
    margin: 0 auto 0.25em auto;
}

#page-metadata > .link-tags a {
    white-space: nowrap;
}

#page-metadata > .link-tags a:nth-child(n+2) {
    margin: 0 0.05em 0 0.1em;
}

#page-metadata > .link-tags,
#page-metadata-block {
    hyphens: none;
}

#page-metadata-block > span {
    white-space: nowrap;
}

/*	Interpunct separators for the metadata fields; looks nicer than semicolons
	or slashes
 */
#page-metadata-block > span:not(:last-child)::after {
    content: "\00B7"; /* interpunct MIDDLE DOT (U+00B7) '·' */
    margin: 0 0.35em 0 0.65em;
}

@media only screen and (min-width: 650px) {
    #page-metadata {
        overflow: auto;
        font-size: calc((19 / 20) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 0.75em auto;
        hyphens: none;
    }

    #page-metadata-block,
    #page-metadata > .link-tags {
        font-size: calc((18 / 20) * var(--base-font-size));
    }

    #page-metadata-block br {
        display: none;
    }
}

@media only screen and (max-width: 649px) {
    #page-metadata {
        overflow: visible;
        font-size: calc((17 / 18) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 1em auto;
        line-height: calc(25 / 17);
    }

    #page-metadata > .link-tags,
    #page-metadata-block {
        text-align: center;
    }

    #page-metadata > .link-tags {
        margin: 0 auto 0.75em auto;
    }

    #page-metadata-block {
        font-size: calc((16 / 18) * var(--base-font-size));
        line-height: calc(25 / 16);
    }

    #page-metadata-block > #page-status::after,
    #page-metadata-block > #page-importance::after {
        content: none;
    }
}

/*=------------------------=*/
/*= Fancy link underlining =*/
/*=------------------------=*/

/*  Tufte CSS for underlining (https://github.com/edwardtufte/tufte-css)
    The advantage of all this CSS linenoise compared to the previous 'text-decoration: none; border-bottom: 1px Solid grey;' solution from http://devhints.wordpress.com/2006/10/24/css-links-with-different-color-underlines/
    is the 'skip-ink': when dealing with characters with 'descenders', like 'y', 'g', 'p', 'q' etc, with regular underlining the bottom stroke overlaps with the line and it's harder to read;
    by adding this text-shadow stuff and backgrounding, a little break is made in the underline to add contrast and keep the descender fully visible and outlined. (The downside is that the overlapping text-shadows can also slightly damage the rendering of slashes & parentheses, which come too close and get partially erased.)

    Unfortunately, we don't want to add underlines to links in the TOC because it clutters it (all the lines are links and are in small font), so we have to avoid styling the TOC, which is difficult.
    I got around this by adding in the Hakyll template an additional <div> just for the body of the Markdown content, excluding the TOC, and changing the Tufte CSS to target *that* instead.

May be able at some point to simplify this using regular link underlining, since CSS4's `text-decoration-skip-ink` by default avoids overlapping with text descenders (but as of Oct 2019, no Edge/IE or Safari support, and only the latest Firefox 70 supports it; maybe in a few years...): https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink#Browser_Compatibility https://www.caniuse.com/#feat=mdn-css_properties_text-decoration-skip-ink (Right now, Firefox skip-ink looks quite bad: it doesn't skip enough ink, defeating the point, and also positions the underline badly!)
*/
.link-tags {
    font-style: italic;
}

.markdownBody a:link,
#footer a:link {
    text-decoration: none;
    background-image: linear-gradient(var(--link-underline-gradient-line-color), var(--link-underline-gradient-line-color));
    background-size: 1px 1px;
    background-repeat: repeat-x;
    background-position: 0% calc(100% - 0.1em);

    /*  Disable oldstyle nums in underlined links because the oldstyle nums are almost subscript-like and overlap */
    font-variant-numeric: lining-nums;
}

.markdownBody a:link,
.markdownBody a:link *,
#footer a:link {
    text-shadow: 0 0.05em var(--link-underline-background-color),
    0.05em 0.05em var(--link-underline-background-color),
    -0.05em 0.05em var(--link-underline-background-color),
    0.17em 0.05em var(--link-underline-background-color),
    -0.17em 0.05em var(--link-underline-background-color),
    0.17em 0 var(--link-underline-background-color),
    -0.17em 0 var(--link-underline-background-color);
}

.markdownBody a:hover {
    background-image: linear-gradient(var(--link-underline-gradient-line-color-hover), var(--link-underline-gradient-line-color-hover));
}

/* eliminate the blurring of headers and links when selecting by overriding the text-shadow: */
::selection {
    text-shadow: none;
    background: var(--text-selection-background-color);
    color: var(--text-selection-color);
}

/*  Prevent code block background color and border from obscuring link
    underlining, for inline <code> elements in links.
 */
a code {
    border-bottom-width: 0;
    word-break: normal;
    background-color: transparent;
}

/*  Reduce text-shadow overlap partially erasing letters next to smallcaps:
    eg. in `<a href="https://www.microcovid.org/">"microCOVID project"</a>`,
    the ‘o’ in ‘micro’ will be partially erased and look like a ‘c’ without
    some sort of extra spacing
 */
.markdownBody a:link .smallcaps {
    margin-left: 0.8px;
}

/*  Like above, but for subscripts and superscripts
 */
.markdownBody a:link sub,
.markdownBody a:link sup {
    padding: 0 0.05em;
}

/***********************/
/* PAGE METADATA BLOCK */
/***********************/

#page-metadata {
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

/* Override normal handling of italics: before, we wrapped descriptions in `<em>`; however, they compile to HTML which can contain italics of their own (eg. book titles). This causes HTML Tidy to warn about nested italics (which is valid HTML but *usually* means you've made an error - this often triggers when I mess up bolding, for example, like on /GPT-3 ). So we removed the wrapper in favor of the above `font-style: italic`. However, now the titles don't unitalicize automatically like they would for nested italics! So we force italicized titles back to normal Roman font to match the expected typographic convention. */
#page-description {
    display: block;
    font-style: italic;
    text-align: justify;
}

#page-description em {
    font-style: normal;
}

#page-metadata > .link-tags {
    margin: 0 auto 0.25em auto;
}

#page-metadata > .link-tags a {
    white-space: nowrap;
}

#page-metadata > .link-tags a:nth-child(n+2) {
    margin: 0 0.05em 0 0.1em;
}

#page-metadata > .link-tags,
#page-metadata-block {
    hyphens: none;
}

#page-metadata-block > span {
    white-space: nowrap;
}

/*	Interpunct separators for the metadata fields; looks nicer than semicolons
	or slashes
 */
#page-metadata-block > span:not(:last-child)::after {
    content: "\00B7"; /* interpunct MIDDLE DOT (U+00B7) '·' */
    margin: 0 0.35em 0 0.65em;
}

@media only screen and (min-width: 650px) {
    #page-metadata {
        overflow: auto;
        font-size: calc((19 / 20) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 0.75em auto;
        hyphens: none;
    }

    #page-metadata-block,
    #page-metadata > .link-tags {
        font-size: calc((18 / 20) * var(--base-font-size));
    }

    #page-metadata-block br {
        display: none;
    }
}

@media only screen and (max-width: 649px) {
    #page-metadata {
        overflow: visible;
        font-size: calc((17 / 18) * var(--base-font-size));
    }

    #page-description {
        margin: 0 auto 1em auto;
        line-height: calc(25 / 17);
    }

    #page-metadata > .link-tags,
    #page-metadata-block {
        text-align: center;
    }

    #page-metadata > .link-tags {
        margin: 0 auto 0.75em auto;
    }

    #page-metadata-block {
        font-size: calc((16 / 18) * var(--base-font-size));
        line-height: calc(25 / 16);
    }

    #page-metadata-block > #page-status::after,
    #page-metadata-block > #page-importance::after {
        content: none;
    }
}

/*=-----------=*/
/*= Footnotes =*/
/*=-----------=*/

section.footnotes {
    position: relative;
}

section.footnotes > ol {
    list-style-type: none;
    padding-left: 2.625em;
    overflow: visible;
}

section.footnotes > ol > li {
    counter-increment: footnotes;
    min-height: calc(1.75em + 1px);
    padding: 6px 0 0 0;
}

section.footnotes > ol > li::before {
    content: counter(footnotes);
    position: absolute;
    right: calc(100% + 0.75em);
    top: calc(-0.125em + 5px);
    width: 1.75em;
    height: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dotted var(--footnote-border-color);
    border-right-color: transparent;
    line-height: 1;
    font-feature-settings: 'lnum';
    z-index: 1;
}

section.footnotes > ol > li::after {
    content: "";
    position: absolute;
    border-right: 1px dotted var(--footnote-border-color);
    height: calc(100% + 0.125em - 4px);
    top: calc(-0.125em + 5px);
    left: calc(-0.75em - 1px);
}

/*=-----------------------------=*/
/*= Footnotes section self-link =*/
/*=-----------------------------=*/

section.footnotes .section-self-link {
    position: absolute;
    width: 2em;
    height: 2em;
    top: 3px;
    border: 1px solid transparent;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    opacity: 0;
}

/*=-----------------------=*/
/*= Footnote highlighting =*/
/*=-----------------------=*/

section.footnotes > ol > li:target::before,
section.footnotes > ol > li:target::after,
section.footnotes > ol > li.highlighted::before,
section.footnotes > ol > li.highlighted::after {
    border-style: solid;
    border-color: var(--footnote-highlighted-border-color);
    box-shadow: 0 0 0 1px var(--body-background-color) inset,
    0 0 0 2px var(--footnote-highlighted-border-color) inset;
}

section.footnotes > ol > li:target::after,
section.footnotes > ol > li.highlighted::after {
    border-width: 0 3px 0 0;
    border-style: double;
    left: calc(-0.75em - 3px);
}

/*=---------------------=*/
/*= Footnote self-links =*/
/*=---------------------=*/

section.footnotes .footnote-self-link {
    position: absolute;
    top: 2px;
    right: calc(100% + 0.75em);
    width: 1.75em;
    height: 1.75em;
    border: 1px solid transparent;
    z-index: 1;
    opacity: 0;
}

/*=-------------------------------------------------------=*/
/*= Horizontal rule at the start of the footnotes section =*/
/*=-------------------------------------------------------=*/

section.footnotes >hr {
    border:none;
}

section.footnotes > hr:first-child {
    position: relative;
    margin: 1.75em 0 1.375em 0;
    padding: 3px 0;
}

section.footnotes > hr:first-child::after {
    content: "";
    border: 1px solid var(--footnotes-section-top-rule-color);
    width: 2em;
    height: 2em;
    background-color: var(--body-background-color);
    z-index: 1;
    box-shadow: 0 0 0 calc(0.5em - 1px) var(--body-background-color) inset,
    0 0 0 0.5em var(--footnotes-section-top-rule-color) inset;
    filter: none;
    opacity: 1.0;
}

section.footnotes > hr:first-child::before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: var(--footnotes-section-top-rule-color);
    width: 100%;
    top: 50%;
}

section.footnotes:target > hr:first-child::after,
section.footnotes > hr:first-child.highlighted::after {
    border-color: var(--footnote-highlighted-border-color);
    box-shadow: 0 0 0 1px var(--body-background-color) inset,
    0 0 0 2px var(--footnote-highlighted-border-color) inset,
    0 0 0 calc(0.5em - 1px) var(--body-background-color) inset,
    0 0 0 0.5em var(--footnote-highlighted-border-color) inset,
    0 0 0 calc(0.5em + 1px) var(--body-background-color) inset,
    0 0 0 calc(0.5em + 2px) var(--footnote-highlighted-border-color) inset;
}

section.footnotes:target > hr:first-child::before,
section.footnotes > hr:first-child.highlighted::before {
    background-color: var(--body-background-color);
    box-shadow: 0 1px 0 0 var(--footnote-highlighted-border-color) inset,
    0 -1px 0 0 var(--footnote-highlighted-border-color) inset;
    height: 3px;
}

/*************/
/* SIDENOTES */
/*************/

#sidenote-column-left,
#sidenote-column-right {
    position: absolute;
    max-width: var(--sidenotes-max-width);
    font-size: 0.85em;
    z-index: 1;
    pointer-events: none;
}

#sidenote-column-left > *,
#sidenote-column-right > * {
    pointer-events: auto;
}

#sidenote-column-left {
    height: calc(100% - 10rem);
    width: calc(50vw - (50% + 92px));
    top: 10rem;
    right: calc(100% + 64px);
}

#sidenote-column-right {
    height: 100%;
    width: calc(50vw - (50% + 104px));
    top: 0;
    left: calc(100% + 60px);
}

/*=-----------------=*/
/*= Sidenote blocks =*/
/*=-----------------=*/

.sidenote {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.85;
    line-height: 1.5;
    padding: 2em 0 0 0;
}

.sidenote.hidden {
    display: none;
}

.sidenote.highlighted,
.sidenote:hover,
.sidenote:target,
.sidenote.targeted {
    background-color: var(--sidenote-highlight-background-color);
    opacity: 1.0;
}

.sidenote:target {
    z-index: 1;
}

.sidenote.highlighted,
.sidenote:hover {
    z-index: 2;
}

/*  This provides a solid hover margin.
    */
.sidenote::after {
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -13px;
    left: -13px;
}

.sidenote.highlighted::after,
.sidenote:hover::after,
.sidenote:target::after,
.sidenote.targeted::after {
    border: 3px double var(--sidenote-highlight-box-shadow-color);
}

/*=-------------------=*/
/*= Sidenote wrappers =*/
/*=-------------------=*/

/*  Outer wrapper (scrolls).
    */
.sidenote-outer-wrapper {
    /* max-height is set inline, in sidenotes.js */
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-style: dotted;
    border-color: var(--sidenote-border-color);
    border-width: 1px 0;
}

.sidenote.cut-off .sidenote-outer-wrapper {
    overflow-y: auto;
    overscroll-behavior: none;
    width: 100%;
    padding: 0 1px 0 0;
    padding-right: 0.5em;
}

/*  Scroll bar styles (for WebKit/Chromium).
    */
.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
    width: 12px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7');
    box-shadow: 0 0 0 2px var(--sidenote-scrollbar-track-color) inset;
    background-size: 2px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb:hover {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
}

/*  Scroll bar styles (for Firefox).
    */
.sidenote.cut-off .sidenote-outer-wrapper {
    scrollbar-color: var(--sidenote-scrollbar-thumb-color) var(--sidenote-scrollbar-track-color);
}

.sidenote.cut-off .sidenote-outer-wrapper:hover {
    scrollbar-color: var(--sidenote-scrollbar-thumb-hover-color) var(--sidenote-scrollbar-track-color);
}

/*  Inner wrapper (does not scroll; stretches to height of content).
    */
.sidenote-inner-wrapper {
    position: relative;
    margin: 0.5em 0;
}

/*  Ensure content is interactable.
    */
.sidenote-inner-wrapper > * {
    position: relative;
    z-index: 1;
}

/*=--------------------------------------=*/
/*= Sidenote contents layout corrections =*/
/*=--------------------------------------=*/

.sidenote blockquote {
    margin: 1.5em 0 0.75em 0;
}

.sidenote pre {
    margin: 1.75em 0 0.75em 0;
}

.sidenote blockquote + *,
.sidenote pre + * {
    margin-top: 1.75em;
}

.sidenote p + p {
    text-indent: 1.25em;
}

#markdownBody .sidenote ul,
#markdownBody .sidenote ol {
    padding: 0 0 0 1.75em;
}

#markdownBody .sidenote li {
    text-align: left;
}

/*=-------------------------------=*/
/*= Sidenote self-links (numbers) =*/
/*=-------------------------------=*/

.sidenote > .sidenote-self-link {
    font-weight: 600;
    position: absolute;
    top: 0;
    border-style: dotted;
    border-color: var(--sidenote-self-link-border-color);
    border-width: 1px 1px 0px 1px;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*  Disable link underlining.
    */
.markdownBody .sidenote > .sidenote-self-link {
    background-image: none;
}

#sidenote-column-left .sidenote > .sidenote-self-link {
    right: 0;
}

#sidenote-column-right .sidenote > .sidenote-self-link {
    left: 0;
}

/*=------------=*/
/*= Edge cases =*/
/*=-------------=*/

.sidenote .footnote-self-link {
    display: none;
}

.footnotes .sidenote .footnote-back {
    vertical-align: text-top;
}

.footnotes .sidenote blockquote + a.footnote-back,
.footnotes .sidenote pre + a.footnote-back,
.footnotes .sidenote .sourceCode + a.footnote-back {
    top: unset;
    bottom: 0;
}

/*=--------------=*/
/*= Margin notes =*/
/*=--------------=*/
/* display inline on mobile/narrow windows; on sufficiently-wide screens, pop out as number-less sidenotes */

.marginnote {
    /* bolding turns out to be too obtrusive for users' liking; italicized both inline & popped-out */
    font-style: italic;
    color: var(--body-text-color);
    font-family: var(--serif-font-stack);
}

.marginnote.inline {
    color: inherit;
}

.marginnote.sidenote {
    display: initial;
    /*  965px because that’s the width of #markdownBody at the widths where we
        get margin notes. Someday, find a way to auto-compute this (but note
        that `50%` doesn’t work in place of `(965px / 2)`; it breaks when the
        margin note is within a narrower block, like a <p> within an <ol>).
        —SA 2022-03-28
     */
    width: calc(50vw - ((965px / 2) + 104px));
    max-width: var(--sidenotes-max-width);
    left: calc(100% + 60px);

    /*  We inherit left and right padding from .sidenote class. */
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    font-size: calc(var(--body-text-font-size) * 0.85);
    text-align: left;
    text-indent: 0;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    opacity: 0.85;
    z-index: 1;
}

.marginnote.sidenote:hover {
    box-shadow: none;
}

/* make links in margin notes (somewhat unusual but should be supported simply because that's what one would expect) clickable/hover-able */
.sidenote.marginnote::after {
    z-index: -1;
}

/*  Margin notes within admonitions need special layout.
    This is based on the width of the admonition icon area.
    */
.admonition .marginnote.sidenote {
    width: calc(50vw - ((100% + (2.875em / (0.85 / 0.875))) / 2 + 104px));
}

/**********/
/* TABLES */
/**********/

h1 + .table-wrapper,
h2 + .table-wrapper,
h3 + .table-wrapper,
h4 + .table-wrapper,
h5 + .table-wrapper,
h6 + .table-wrapper {
    margin: 0 0 2.125em 0;
}

table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
    font-size: 0.75em;
    border-style: solid;
    border-color: var(--table-border-color);
    border-width: 2px 0;
}

/*=-------------------=*/
/*= Full-width tables =*/
/*=-------------------=*/

.table-wrapper.width-full .full-width-table-inner-wrapper {
    background-color: var(--table-full-width-background-color);
}

blockquote .table-wrapper.width-full {
    background-color: transparent;
}

/*=-------------=*/
/*= Table parts =*/
/*=-------------=*/

table caption {
    padding: 0.25em 0.75em;
    font-style: italic;
    font-size: 1.25em;
    border-top: 2px solid var(--table-caption-border-color);
}

table th,
table td {
    padding: 7px 10px;
    line-height: 1.35;
}

table th {
    font-weight: bold;
    border-bottom: 1px solid var(--table-row-horizontal-border-color);
    text-align: left;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

table td {
    vertical-align: top;
}

table th + th,
table td + td {
    border-left: 1px solid var(--table-cell-vertical-border-color);
}

table td > code {
    word-break: normal;
}

/*  Horizontal scroll bar styles (for WebKit/Chromium).
    */
.table-wrapper::-webkit-scrollbar {
    height: 16px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7');
    background-size: 2px;
    box-shadow: 0 2px 0 0 var(--table-scrollbar-track-color) inset,
    0 0 0 1px var(--table-scrollbar-border-color) inset,
    0 2px 0 1px var(--table-scrollbar-border-color) inset;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
}

/*  Horizontal scroll bar styles (for Firefox).
    */
.table-wrapper {
    scrollbar-color: var(--table-scrollbar-thumb-color) var(--table-scrollbar-track-color);
}

.table-wrapper:hover {
    scrollbar-color: var(--table-scrollbar-thumb-hover-color) var(--table-scrollbar-track-color);
}

/*  Add little icons to tables handled by tablesorter.js
    to advertise that they are sortable.
    https://mottie.github.io/tablesorter/docs/#Configuration
    */
th.tablesorter-header {
    background-image: url('/static/images/tablesorter/tablesorter-bg.gif');
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
}

th.tablesorter-header:hover {
    background-color: var(--table-column-heading-hover-background-color);
}

th.tablesorter-header:focus {
    outline: none;
}

th.tablesorter-headerAsc {
    background-image: url('/static/images/tablesorter/tablesorter-asc.gif');
}

th.tablesorter-headerDesc {
    background-image: url('/static/images/tablesorter/tablesorter-desc.gif');
}

th.tablesorter-headerAsc,
th.tablesorter-headerDesc,
th.tablesorter-headerAsc:hover,
th.tablesorter-headerDesc:hover {
    background-color: var(--table-sorted-column-heading-background-color);
    color: var(--table-sorted-column-heading-text-color);
    text-shadow: 0.5px 0.5px 0 var(--table-sorted-column-heading-text-shadow-color),
    0 0 1px var(--table-sorted-column-heading-text-shadow-color);
}

/*  zebra-stripe tables (CSS3); from Twitter's bootstrap package
    NOTE: we tried 3-cycle zebra striping tables, but didn't pass muster.
    */
:not(.table-small) > table tr:nth-child(odd) td {
    background-color: var(--table-zebra-stripe-alternate-row-background-color);
    --link-underline-background-color: var(--table-zebra-stripe-alternate-row-background-color);
}

.markdownBody table tbody tr:hover {
    outline: 1px dotted var(--table-row-hover-outline-color);
}

/*  Tables in blockquotes.
    */
blockquote :not(.small-table) > table {
    --table-zebra-stripe-alternate-row-background-color: var(--body-background-color);
}

blockquote table th + th,
blockquote table td + td {
    border-left: 1px solid var(--blockquote-background-color);
}

/*  Corrected version of suppliers tables CSS on /Modafinil; original by cwillu
    */
#suppliers-prices th {
    padding: 3px 15px;
}

#suppliers-prices td {
    padding: 0 15px;
}

#suppliers-prices th:nth-last-child(n+3),
#suppliers-prices td:nth-last-child(n+3) {
    text-align: right !important;
}

#suppliers-prices td:nth-child(1):after {
    content: " mg/$";
}

#suppliers-prices td:nth-child(2):after {
    content: " mg";
}

#suppliers-prices td:nth-child(3):before {
    content: "x";
    opacity: 0.4;
}

#suppliers-prices td:nth-child(4):before,
#suppliers-prices td:nth-child(5):before {
    content: "$";
}

/*  Horizontal scroll bar styles (for WebKit/Blink).
    */
pre::-webkit-scrollbar {
    height: 16px;
    background-color: var(--pre-element-scrollbar-track-color);
}

pre::-webkit-scrollbar-thumb {
    background-color: var(--pre-element-scrollbar-thumb-color);
    box-shadow: 0 0 0 3px var(--pre-element-scrollbar-track-color) inset;
}

pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--pre-element-scrollbar-thumb-hover-color);
}

/*  Horizontal scroll bar styles (for Firefox).
    */
pre {
    scrollbar-color: var(--pre-element-scrollbar-thumb-color) var(--pre-element-scrollbar-track-color);
}

pre:hover {
    scrollbar-color: var(--pre-element-scrollbar-thumb-hover-color) var(--pre-element-scrollbar-track-color);
}

/***************/
/* CODE BLOCKS */
/***************/

code {
    --link-underline-background-color: var(--code-element-background-color);

    border: 1px solid var(--code-element-border-color);
    background-color: var(--code-element-background-color);

    padding: 0 4px;

    /*  Tufte CSS's monospace/sans suggestions, borrowing from Github: */
    /*  Added IBM Plex Mono webfont for styling consistency across platforms. */
    /* Primary font: https://en.wikipedia.org/wiki/IBM_Plex This was chosen for its dotted/slashed zero (a sine qua non of coding fonts where O/0 ambiguity is fatal), and for rendering well on Macs. */
    font-family: var(--monospaced-font-stack);
    /*  OpenType stylistic sets to enable single-story 'g' and slashed zero in
        IBM Plex Mono. */
    font-feature-settings: 'ss02', 'ss03';

    font-size: 0.9em;
    word-break: break-all;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

/*  Bare-URL links will be <a><code>http://foo.bar</code></a> */
a code {
    font-size: 0.9em;
}

pre {
    margin: 1.75em auto;
    border: 1px solid var(--pre-element-border-color);
    background-color: var(--pre-element-background-color);
    cursor: text;
    max-height: calc(100vh - 8em);
}

pre code {
    display: block;
    padding: 0.4rem 0.7rem;
    margin: 0;
    border: none;
    background-color: transparent;
}

/*=------------------------------------------------------------------------------------------=*/
/*= Source code highlighting for pandoc/skylighting-generated syntax classes (not Pygments)  =*/
/*=------------------------------------------------------------------------------------------=*/

/* Monochrome-ish code highlighting theme, loosely based on Pygments's algol_nu (CSS: https://github.com/lukelbd/proplot/blob/master/docs/_static/pygments/algol_nu.css demo: https://xyproto.github.io/splash/docs/longer/algol_nu.html ; Python: https://github.com/pycom/EricShort/blob/master/ThirdParty/Pygments/pygments/styles/algol.py ). */
/* This skips the underlining and overuse of graying, and uses a bit of blue as an alternative, and retains red for warnings/errors. */
code span {
    color: var(--syntax-highlight-color-normal);
}

/* Normal */
code span.at {
    color: var(--syntax-highlight-color-attribute);
}

/* Attribute */
code span.dt {
    color: var(--syntax-highlight-color-data-type);
    font-weight: bold;
    font-style: italic
}

/* DataType */
code span.va {
    color: var(--syntax-highlight-color-variable);
    font-weight: bold;
    font-style: italic
}

/* Variable */
code span.ot {
    color: var(--syntax-highlight-color-other);
    font-weight: bold;
    font-style: italic
}

/* Other */
code span.pp {
    color: var(--syntax-highlight-color-preprocessor);
    font-weight: bold;
    font-style: italic
}

/* Preprocessor */
code span.ex {
    color: var(--syntax-highlight-color-extension);
    font-style: italic
}

/* Extension */
code span.co {
    color: var(--syntax-highlight-color-comment);
}

/* Comment */
code span.cf {
    color: var(--syntax-highlight-color-control-flow);
    font-weight: bold;
}

/* ControlFlow */
code span.kw {
    color: var(--syntax-highlight-color-keyword);
    font-weight: bold;
}

/* Keyword */
code span.op {
    color: var(--syntax-highlight-color-operator);
}

/* Operator */
code span.sc {
    color: var(--syntax-highlight-color-special-char);
}

/* SpecialChar */
code span.bu {
    color: var(--syntax-highlight-color-built-in);
    font-weight: bold;
}

/* BuiltIn */
code span.fu {
    color: var(--syntax-highlight-color-function);
}

/* Function */
code span.cn {
    color: var(--syntax-highlight-color-constant);
    font-weight: bold;
}

/* Constant */
code span.dv {
    color: var(--syntax-highlight-color-dec-val);
    font-weight: bold;
}

/* DecVal */
code span.bn {
    color: var(--syntax-highlight-color-base-n);
    font-weight: bold;
    font-feature-settings: 'ss01';
}

/* BaseN: "dsBaseN, values with a base other than 10." */
code span.fl {
    color: var(--syntax-highlight-color-float);
    font-weight: bold;
    font-feature-settings: 'ss01';
}

/* Float */
code span.in {
    color: var(--syntax-highlight-color-information);
    font-weight: bold;
}

/* Information */
code span.ch {
    color: var(--syntax-highlight-color-char);
    font-style: italic;
}

/* Char */
code span.st {
    color: var(--syntax-highlight-color-string);
    font-style: italic;
}

/* String */
code span.ss {
    color: var(--syntax-highlight-color-special-string);
    font-weight: bold;
    font-style: italic
}

/* SpecialString: "dsSpecialString, SQL, regexes, HERE docs, LaTeX math mode, ..."x1 */
code span.vs {
    color: var(--syntax-highlight-color-verbatim-string);
    font-style: italic;
}

/* VerbatimString: "dsVerbatimString, verbatim or raw strings like 'raw \backlash' in Perl, CoffeeScript, and shells, as well as r'\raw' in Python." */
code span.al {
    color: var(--syntax-highlight-color-alert);
    text-decoration: double underline;
    font-weight: bold;
}

/* Alert */
code span.er {
    color: var(--syntax-highlight-color-error);
}

/* Error */
code span.im {
    color: var(--syntax-highlight-color-import);
    font-weight: bold;
    font-style: italic
}

/* Import */

/********/
/* MATH */
/********/

.mjpage__block {
    overflow-y: hidden;
    margin: 1.25em auto;
    background-color: var(--math-block-background-color);
    padding: 0.5em 0.5em 0.375em 0.5em;
    box-shadow: 0 0 0 1px var(--math-block-scrollbar-border-color) inset;
    transition: background-color 0.15s ease-out;
}

.mjpage__block.flash {
    background-color: var(--math-block-background-color-flash);
    transition: background-color 0.1s ease-out;
}

.mjpage__block .MJXc-display {
    margin: 0;
    padding: 0.25em 0;
}

/*  Horizontal scroll bar styles (for WebKit/Chromium).
    */
.mjpage__block::-webkit-scrollbar {
    height: 14px;
    border: 1px solid var(--math-block-scrollbar-border-color);
    background-color: var(--math-block-scrollbar-track-color);
}

.mjpage__block::-webkit-scrollbar-thumb {
    box-shadow: 0 0 0 2px var(--math-block-scrollbar-track-color) inset,
    0 0 0 8px var(--math-block-scrollbar-thumb-color) inset;
    border-color: var(--math-block-scrollbar-border-color) transparent;
    border-style: solid;
    border-width: 1px;
}

.mjpage__block:hover::-webkit-scrollbar-thumb:hover {
    box-shadow: 0 0 0 2px var(--math-block-scrollbar-track-color) inset,
    0 0 0 8px var(--math-block-scrollbar-thumb-hover-color) inset;
}

/*  Horizontal scroll bar styles (for Firefox).
    */
.mjpage__block {
    scrollbar-color: var(--math-block-scrollbar-thumb-color) var(--math-block-scrollbar-track-color);
}

.mjpage__block:hover {
    scrollbar-color: var(--math-block-scrollbar-thumb-hover-color) var(--math-block-scrollbar-track-color);
}

/*  Block buttons.
 */
.mjpage__block {
    position: relative;
}

.mjpage__block .block-button-bar {
    position: absolute;
    top: 0;
    right: 0;
    border-color: var(--math-block-scrollbar-border-color);
    border-style: solid;
    border-width: 1px;
    text-indent: 0;
}

@media only screen and (min-width: 650px) {
    .mjpage__block .block-button-bar {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease,
        visibility 0.15s ease;
    }

    .mjpage__block:hover .block-button-bar {
        opacity: 1.0;
        visibility: visible;
        transition: opacity 0s ease 0.05s,
        visibility 0s ease 0.05s;
    }
}

.mjpage__block .block-button-bar button {
    -moz-appearance: none;
    appearance: none;
    display: block;
    font-size: inherit;
    border: none;
    padding: 0.25em;
    width: 1.25em;
    background-color: var(--body-background-color);
    cursor: pointer;
}

.mjpage__block .block-button-bar button img {
    display: block;
    opacity: 0.65;
}

@media only screen and (min-width: 650px) {
    .mjpage__block .block-button-bar button img {
        opacity: 0.45;
    }

    .mjpage__block .block-button-bar button:hover img {
        opacity: 0.65;
    }
}

.mjpage__block .block-button-bar button:active img {
    transform: scale(0.95);
}

/*  Scratchpad for copy operations.
 */
.mjpage__block .block-button-bar .scratchpad {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

#page-metadata > hr {
    width:50%;
}