@charset "UTF-8";

/* Fonts: loaded in fonts.css */
/* General desktop/mobile: loaded in initial.css */
/* default.css: contains everything else, like drop caps, link icons, tables, etc */

/**********/
/* COLORS */
/**********/
/* colors are now in /static/css/colors.css or dark-mode.css */

/*******************/
/* OTHER VARIABLES */
/*******************/

:root {
    --GW-sidenotes-max-width: 550px;

    --GW-popups-popup-max-width: 640px;
    --GW-popups-popup-max-height: 480px;
    --GW-popups-popup-with-title-bar-min-width: 320px;
    --GW-popups-annotation-popup-min-width: 360px;
    --GW-popups-annotation-popup-min-height: 120px;
    --GW-popups-aux-links-popup-min-width: 360px;
    --GW-popups-aux-links-popup-min-height: 120px;
    --GW-popups-local-page-popup-min-width: 360px;
    --GW-popups-local-page-popup-min-height: 120px;
    --GW-popups-popup-border-width: 3px;
    --GW-popups-popup-title-bar-height: calc(1.5rem + 1px);
    --GW-popups-popup-mini-title-bar-height: calc(1rem + 1px);
    --GW-popups-video-iframe-width: 495px;
    --GW-popups-video-iframe-height: 310px;
    --GW-popups-image-popup-min-size: 64px;

    --GW-popins-popin-max-height: 75vh;
    --GW-popins-popin-min-height: 120px;
    --GW-popins-popin-border-width: 3px;
    --GW-popins-popin-title-bar-height: 1.75rem;
    --GW-popins-popin-footer-bar-height: 1.75rem;
}


/*********************/
/* ARTICLE CONTAINER */
/*********************/

/*  (ie. article) */
/*  Nothing!
    */


/************/
/* SECTIONS */
/************/
/*  Use: annotate collapsible section headers with '{.collapse}' (in the Markdown);
    for sections where I want a summary/abstract of that (eg. in Notes.page/Statistical-notes.page),
    one annotate summaries to keep uncollapsed with '<div class="abstract-collapse">summary</div>'.
    (Pandoc Markdown does support a native div syntax, but it's long and ugly.)
 */

.collapse {
    min-height: 5rem;
    position: relative;
    overflow: hidden;
    padding: 0 0 2rem 0;
    box-sizing: border-box;
    margin: 1em 0;
}
.collapse.expanded > :not(.disclosure-button) {
    position: relative;
    z-index: 13;
}
.collapse:not(.expanded) > .disclosure-button ~ :not(.abstract-collapse) {
    max-height: 0;
    min-height: unset;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
}
.collapse.expanded {
    overflow: visible;
}

.collapse::before {
    content: "";
    position: absolute;
    left: 0.5em;
    top: 3rem;
    bottom: 2rem;
    right: 0;
    background-color: var(--GW-body-background-color);
}
.collapse.expanded::before {
    z-index: 12;
}

/********************/
/*  Collapse summary.
 */
.collapse .abstract-collapse {
    margin: 0;
    position: relative;
    z-index: 1;
}
.collapse .abstract-collapse.abstract {
    margin-left: calc(-0.5em - 2px);
}
.collapse:not(.expanded) > .abstract-collapse {
    pointer-events: none;
    position: relative;
}
.collapse:not(.expanded) > .abstract-collapse blockquote {
    margin: 0;
    border-color: var(--GW-abstract-background-color);
}
.collapse:not(.expanded) > .disclosure-button:hover + .abstract-collapse blockquote {
    background-color: var(--GW-abstract-collapse-blockquote-hover-color);
    border-color: var(--GW-abstract-collapse-blockquote-hover-color);
}

/*********************/
/*  Disclosure button.
 */
.disclosure-button {
    --button-color: var(--GW-collapse-disclosure-button-color);

    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    font-weight: inherit;
    font-style: inherit;
    font-size: 0.875em;
    font-family: var(--GW-sans-serif-font-stack);
    box-shadow:
        0.5em 0 0 0 var(--button-color) inset;
    transition:
        box-shadow 0.1s ease;
}
.disclosure-button:hover {
    --button-color: var(--GW-collapse-disclosure-button-hover-color);

    z-index: 11;
}
.disclosure-button:focus {
    outline: none;
}
/*
.disclosure-button:checked {
    pointer-events: none;
}
.disclosure-button:checked::before,
.disclosure-button:checked::after {
    pointer-events: auto;
}
 */

/*  Top and bottom parts of disclosure button.
 */
.disclosure-button::before,
.disclosure-button::after {
    background-color: var(--button-color);
    transition:
        color 0.1s ease,
        background-color 0.1s ease;
}

/*  Top part of disclosure button.
 */
.disclosure-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3rem;
    text-align: right;
    color: var(--GW-collapse-disclosure-button-top-part-text-color);
    padding: 1rem 3rem 0.75rem 3rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" fill="%23CCC"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) 0.625rem;
    background-size: auto 1.5rem;
    box-sizing: border-box;
}
.disclosure-button:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" fill="%23FFF"/></svg>');
    color: var(--GW-collapse-disclosure-button-text-hover-color);
}
.disclosure-button:checked::before {
    content: "Click to collapse";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="%23CCC"/></svg>');
    background-position: calc(100% - 0.75rem) 0.75rem;
}
.disclosure-button:checked:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="%23FFF"/></svg>');
}

/*  Bottom part of disclosure button.
 */
.disclosure-button::after {
    width: 100%;
    height: 2rem;
    position: absolute;
    text-align: center;
    pointer-events: none;
    content: "… Click to expand …";
    color: var(--GW-collapse-disclosure-button-bottom-part-text-color);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.disclosure-button:hover::after {
    color: var(--GW-collapse-disclosure-button-text-hover-color);
}
.disclosure-button:checked::after {
    content: "Click to collapse";
}

/************************************************/
/*  Collapsible sections (the <section> element).
 */
section.collapse {
    padding-left: 1em;
    margin: 2.5em 0 2.25em -1em;
}
section.collapse > *:first-child {
    margin-top: 0;
    position: relative;
    z-index: 12;
    pointer-events: none;
    margin-left: -0.5rem;
}
section.collapse > :first-child a::after {
    top: -0.1em;
    left: 0.5em;
}
section.collapse > h1:first-child {
    margin-bottom: 0.375em;
}
section.collapse > h2:first-child {
    line-height: 1.75;
}
section.collapse > h2:first-child::after {
    content: none;
}
section.collapse > *:first-child a {
    text-shadow: none;
}
section.collapse > :first-child > a {
    pointer-events: auto;
    position: relative;
}

section.collapse .abstract-collapse:not(.abstract) {
    margin: 1.5em 0 0.25em 0;
}
section.collapse.expanded > .abstract-collapse:not(.abstract) {
    margin-bottom: 0;
}

/**********************************/
/*  Collapsible non-section blocks.
 */
:not(section).collapse {
    margin-left: -1em;
}
:not(section).collapse:not(.expanded) {
    padding: 0 0 0 1em;
}
:not(section).collapse:not(.expanded) > .disclosure-button ~ :not(.abstract-collapse) {
    max-height: 5rem;
}

:not(section).collapse:not(.expanded) > .disclosure-button {
    --button-color: var(--GW-collapse-disclosure-button-color-15-percent-transparent);

    background-color: var(--button-color);
}
:not(section).collapse > .disclosure-button {
    transition:
        box-shadow 0.1s ease,
        color 0.1s ease,
        background-color 0.1s ease;
}
:not(section).collapse:not(.expanded) > .disclosure-button:hover {
    --button-color: var(--GW-collapse-disclosure-button-hover-color-15-percent-transparent);
}
:not(section).collapse:not(.expanded) > .disclosure-button::before,
:not(section).collapse:not(.expanded) > .disclosure-button::after {
    --button-color: var(--GW-collapse-disclosure-button-color);
}
:not(section).collapse:not(.expanded) > .disclosure-button:hover::before,
:not(section).collapse:not(.expanded) > .disclosure-button:hover::after {
    --button-color: var(--GW-collapse-disclosure-button-hover-color);
}
:not(section).collapse:not(.expanded) > .disclosure-button::before {
    width: 3rem;
    height: 3rem;
    padding: 0;
    top: 0;
    right: 0;
    background-position: calc(100% - 1rem) 0.75rem;
}
:not(section).collapse:not(.expanded) > .disclosure-button::after {
    width: 10em;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
:not(section).collapse:not(.expanded) > .disclosure-button {
    box-shadow: none;
}
:not(section).collapse.expanded {
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
    padding: 3.5rem 0 2.5rem 1em;
}

:not(section).collapse:not(.expanded) .abstract-collapse:not(.abstract) {
    margin: 0.5em 0;
}

/***************************/
/*  Collapsible code blocks.
 */

.sourceCode {
    clear: both;
}

.sourceCode .collapse,
.sourceCode.collapse {
    margin: 1.75em auto;
}
.sourceCode .collapse > pre,
.sourceCode.collapse > pre {
    margin: 0;
}
.collapse:not(.expanded) > .disclosure-button ~ pre:not(.abstract-collapse) {
    border: 1px solid var(--GW-pre-element-border-color);
    box-sizing: border-box;
}
.sourceCode .collapse:not(.expanded) > .disclosure-button,
.sourceCode.collapse:not(.expanded) > .disclosure-button {
    width: calc(100% - (1em + 2px));
}
.sourceCode :not(section).collapse:not(.expanded) > .disclosure-button,
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button {
    --button-color: var(--GW-collapse-disclosure-button-color-30-percent-transparent);
}
.sourceCode :not(section).collapse:not(.expanded) > .disclosure-button:hover,
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button:hover {
    --button-color: var(--GW-collapse-disclosure-button-hover-color-30-percent-transparent);
}
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button::before {
    top: 1px;
    right: 1px;
}
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button::after {
    bottom: 1px;
}

/**********************/
/*  Collapsible tables.
 */

.table-wrapper > .collapse {
    margin: 0;
    min-height: unset;
}
.table-wrapper > .collapse:not(.expanded) {
    max-height: calc(4.75rem + 1px);
    margin-left: 1em;
    padding: 0;
}
.table-wrapper > .collapse:not(.expanded) > .disclosure-button::before {
    top: 2px;
}
.table-wrapper > .collapse:not(.expanded) > .disclosure-button::after {
    bottom: 1px;
}

/****************************/
/*  Collapses in blockquotes.
 */

blockquote :not(section).collapse:not(.expanded),
blockquote :not(section).collapse.expanded {
    padding-left: 1.25em;
    padding-right: 1.25em;
    margin-left: -1.25em;
    margin-right: -1.25em;
}
.markdownBody blockquote :not(section).collapse:last-child {
    margin-bottom: -1em;
}

@media all and (max-width: 649px) {
    blockquote :not(section).collapse:not(.expanded),
    blockquote :not(section).collapse.expanded {
        padding-left: 1em;
        padding-right: 1em;
        margin-left: -1em;
        margin-right: -1em;
    }
    .markdownBody blockquote :not(section).collapse:last-child {
        margin-bottom: -0.75em;
    }
}

blockquote .collapse::before {
    background-color: var(--GW-blockquote-background-color);
}
blockquote .collapse:not(.expanded) > .disclosure-button {
    --button-color: var(--GW-collapse-in-blockquote-disclosure-button-color-30-percent-transparent);
}
blockquote .collapse:not(.expanded) > .disclosure-button:hover {
    --button-color: var(--GW-collapse-in-blockquote-disclosure-button-hover-color-30-percent-transparent);
}
blockquote :not(section).collapse:not(.expanded) > .disclosure-button::before,
blockquote :not(section).collapse:not(.expanded) > .disclosure-button::after {
    --button-color: var(--GW-collapse-in-blockquote-disclosure-button-color);
}
blockquote :not(section).collapse:not(.expanded) > .disclosure-button:hover::before,
blockquote :not(section).collapse:not(.expanded) > .disclosure-button:hover::after {
    --button-color: var(--GW-collapse-in-blockquote-disclosure-button-hover-color);
}
blockquote .disclosure-button::before {
    color: var(--GW-collapse-in-blockquote-disclosure-button-top-part-text-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" fill="%23AAA"/></svg>');
}
blockquote .disclosure-button::after {
    color: var(--GW-collapse-in-blockquote-disclosure-button-bottom-part-text-color);
}

/***********************/
/*  Collapse edge cases.
 */

li > :not(section).collapse {
    margin-left: calc(-1 * var(--GW-list-left-padding));
}
li > :not(section).collapse.expanded,
li > :not(section).collapse:not(.expanded) {
    padding-left: var(--GW-list-left-padding);
}


/************/
/* HEADINGS */
/************/

/* HEADER H1-6 HIERARCHY */
h1, h2, h3, h4, h5, h6 {
    margin: 1.25em 0 0.5em -0.75rem;
    font-weight: bold;
    position: relative;
}
@media all and (max-width: 649px) {
    h1, h2, h3, h4, h5, h6 {
        margin: 1.25em 0 0.5em 0;
    }
}

/*=-------------------------=*/
/*= Inline code in headings =*/
/*=-------------------------=*/

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    border: none;
    padding: 0;
    background-color: inherit;
    font-size: inherit;
    font-weight: normal;
}

/*=----------------=*/
/*= Heading levels =*/
/*=----------------=*/
/* h1 defined in initial.css */
section:not(.collapse) > h1:first-child {
    line-height: 1;
    margin: 1.75em 0 0.375em 0;
    text-align: right;
    font-weight: 600;
    box-shadow:
        0 -2px 0 0 var(--GW-H1-box-shadow-background-color) inset,
        0 -3px 0 0 var(--GW-H1-box-shadow-line-color) inset;
}
.markdownBody section:not(.collapse) > h1:first-child a {
    position: relative;
}
.markdownBody section:not(.collapse) > h1:first-child a::after {
    position: absolute;
    top: 0.15em;
}
@media all and (min-width: 650px) {
    section:not(.collapse) > h1:first-child {
        margin: 1.75em 0 0.375em -0.75rem;
        font-size: 2em;
        overflow: hidden;
        padding: 0 0 7px 1.25rem;
        box-shadow:
            0 -5px 0 0 var(--GW-H1-box-shadow-background-color) inset,
            0 -6px 0 0 var(--GW-H1-box-shadow-line-color) inset;
    }
    .markdownBody section:not(.collapse) > h1:first-child a::after {
        left: -0.75em;
    }
}

/*  Italics in h1 headings.
    */
h1 em:last-child {
    padding-right: 0.075em;
}

h2 {
    text-transform: uppercase;
    font-size: 1.25em;
    padding: 0 0.5em 2px 0;
    line-height: 1.25;
}
h2::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    border-bottom: 1px dotted var(--GW-H2-bottom-border-color);
    left: 0;
    bottom: 0.05em;
    pointer-events: none;
}
.markdownBody section:not(.collapse) > h2:first-child a {
    position: relative;
}
.markdownBody section:not(.collapse) > h2:first-child a::after {
    position: absolute;
    top: 0.1em;
    left: unset;
    right: -0.75em;
}
.markdownBody section.collapse > h2:first-child a::after {
    top: -0.2em;
}
@media all and (min-width: 650px) {
    section:not(.collapse) > h2:first-child {
        overflow: hidden;
    }
}

h3 {
    text-transform: capitalize;
    font-size: 1.125em;
}
h4 {
    text-transform: capitalize;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
}

/*  Margins between adjacent headings should collapse.
    */
h1 + section > h2:first-child,
h2 + section > h3:first-child {
    margin-top: 0;
}

/*=----------------------------=*/
/*= Section heading self-links =*/
/*=----------------------------=*/

.markdownBody section > :first-child > a {
    background: none;
}
.markdownBody section:not(.collapse) > h1:first-child a,
.markdownBody section:not(.collapse) > h2:first-child a {
    display: block;
}
section > :first-child a::after {
    content: "\00B6"; /* Pilcrow sign: ¶ */
    font-size: 0.75em;
    position: relative;
    top: -0.2em;
    left: 0.35em;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0s ease 0.1s;
}
section > :first-child a:hover::after,
section > :first-child a:active::after,
section > :first-child a:focus::after,
section.highlighted > :first-child a::after,
section:target > :first-child a::after {
    visibility: visible;
}
section > :first-child a:hover::after,
section > :first-child a:active::after,
section > :first-child a:focus::after,
section.highlighted > :first-child a::after {
    opacity: 0.8;
}
section:target > :first-child a::after {
    opacity: 0.5;
}

/*********************/
/* TABLE OF CONTENTS */
/*********************/

.TOC a:hover,
.markdownBody .TOC a:hover {
    background-color: var(--GW-TOC-link-hover-background-color);
    color: var(--GW-TOC-link-hover-color);
}
.TOC a:hover::after,
.markdownBody .TOC a:hover::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--GW-TOC-link-hover-indicator-bar-color);
    width: 0.25em;
    height: 100%;
}

.markdownBody .TOC.columns > ul {
    margin-bottom: 0;
}

/**********/
/* FOOTER */
/**********/

#footer {
    text-align: center;
    margin: 3em 0 0 0;
}
@media all and (max-width: 649px) {
    #footer {
        margin: 3em 0 2em 0;
    }
}

#footer p {
    margin: 1em 0;
}

/*********************/
/* SECTION SEPARATOR */
/*********************/

hr {
    border: 0;
    margin: 1.125em 0;
    height: 40px;
    line-height: 1;
    display: flex;
}

[class^='horizontal-rule'] {
    clear: both;
}

/* These classes are created at compile-time by the 'rulersCycle' Pandoc rewrite pass in Typography.hs; they assign each use of <hr> in the body a class 0-2 (n modulo 3). This lets us create an astronomical theme cycle: the first, fourth, seventh etc rulers are the triple-white star; the second, fifth, eighth etc are a dotted moon; the third, sixth, ninth etc are a sun. */
hr::after {
    margin: auto;
}
hr::after,
.horizontal-rule-nth-0 hr::after {
    /* https://commons.wikimedia.org/wiki/File:Sun_of_Vergina_black.svg */
    content: url('/static/img/icon/sun-verginasun-black.svg');
    opacity: 0.87;
    width: 40px;
    height: 40px;
}
.horizontal-rule-nth-1 hr::after {
    /* https://commons.wikimedia.org/wiki/File:Japanese_crest_Tsuki_ni_Hoshi.svg */
    /* NOTE: alternative moon icon is /static/img/icon/japanesecrest-oookashippouofoookatadasuke-sun.svg modified from https://commons.wikimedia.org/wiki/File:Japanese_crest_Oooka_Shippou_of_Oooka_Tadasuke.svg - while nice, it lacks the intense moire effect of the Vergina Sun */
    content: url('/static/img/icon/japanesecrest-tsukinihoshi-dottedmoon.svg');
    opacity: 0.90;
    width: 25px;
    height: 25px;
}
.horizontal-rule-nth-2 hr::after {
    content: url('/static/img/icon/asterism-triplewhitestar.svg');
    width: 36px;
    height: 30px;
}
.horizontal-rule-nth-2 {
    filter: drop-shadow(0 0 0 currentColor);
}


/*******************************************/
/* DIRECTORY INDEXES & LINK BIBLIOGRAPHIES */
/*******************************************/

/*  Italicize link tags in popups/indexes similar to the page metadata block’s
    tags, for consistency.
 */
.link-tags {
    font-style: italic;
    margin-left: 0.1em; /* tags are enclosed in ()s, but as links with the text-shadow trick, the italic slant leads to the usual 'chomp' without additional margin. */
}

blockquote .TOC {
    margin: 1.25em 0 0 0;
    padding: 0.5em 0.5em 0.75em 0.75em;

    /*  The following three properties are to prevent both overlap and
        margin-collapse of the TOC when there’s a floated thumbnail figure
        that juts down below the abstract text.
     */
    clear: both;
    display: inline-block;
    width: calc(100% - 1.25em);    /* Subtract side padding. */
}


/***********/
/* NUMBERS */
/***********/
/*  ‘Tabular figures’ to make numbers line up in tables or other
    monospace/code like contexts:

    https://practicaltypography.com/alternate-figures.html#tabular-and-proportional-figures
    https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum
 */
/*  Skip old-style figures in elements with underlining, to reduce the need to
    cross the underline with skip-ink
 */
table, code, pre, a, h1, h2, h3, h4, h5, h6 {
    font-variant-numeric: tabular-nums;
}

/*********/
/* LINKS */
/*********/

a:hover,
#footer a:hover,
#sidebar a:hover {
    color: var(--GW-body-link-hover-color);
}

/*=-----------------------------------------=*/
/*= Icons for certain link types: by target =*/
/*=-----------------------------------------=*/

/* Now handled in /static/css/links.css */

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

ul,
ol {
    --GW-list-left-padding: 2.5em;

    list-style-type: none;
    margin: 1.25em 0 1.5em 0;
    padding: 0 0 0 var(--GW-list-left-padding);
}
#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 all and (max-width: 649px) {
    ul,
    ol {
        --GW-list-left-padding: 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/img/icon/single-black-star.svg');
    opacity: 0.72;

}
ul ul > li::before,
ul ul ul ul ul > li::before,
/* special /index override because the link compilation is not bolded */
body.index .section-link-list > li::before {
    content: url('/static/img/icon/single-white-star.svg');
    opacity: initial;
}
ul ul ul > li::before,
ul ul ul ul ul ul > li::before,
body.index .section-link-list ul > li::before {
    /* this rotates into more of a 'lozenge' square for variety's sake */
    content: url('/static/img/icon/single-white-star-rotated.svg');
    opacity: initial;
}

/*=-----------------------=*/
/*= 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;
}

/***********/
/* FIGURES */
/***********/

figure {
    margin: 2em auto 1.75em auto;
    max-width: calc(100% - 5em);
}
@media all and (max-width: 649px) {
    figure {
        max-width: calc(100% - 2em);
    }
}
figure + figure {
    margin-top: 2.75em;
}
@media all and (max-width: 649px) {
    figure + figure {
        margin-top: 2em;
    }
}

.figure-inner-wrapper {
    display: block;
    margin: auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

figure img {
  background-color: var(--GW-body-background-color);
}

figure img,
figure video,
figure audio {
    outline: 1px solid var(--GW-figure-outline-color);
}
figure.outline-not img,
figure.outline-not video,
figure.outline-not audio {
    outline: none;
}
/* WARNING: work around Chrome layout bug */
figure audio {
    display: block;
    margin: 0 auto;
}

/*  Figure captions.
    */
figcaption {
    font-size: 0.9375em;
    font-weight: bold;
    line-height: 1.50;
    margin: auto;
    padding: 0.25em 0.5em calc(0.25em + 1px) 0.5em;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
}
figcaption strong {
    font-weight: inherit;
    font-variant-caps: small-caps;
}
@media all and (max-width: 649px) {
    figcaption {
        font-size: 0.875em;
    }
}

.caption-wrapper {
    display: block;
    outline: 1px solid var(--GW-figure-caption-outline-color);
    margin: 1px auto 0 auto;
    width: 100%;
}
figure.outline-not .caption-wrapper {
    outline: none;
}
video + .caption-wrapper {
    margin-top: 2px;
}

/*  Prevent lower border from being cut off.
    */
.columns li figure {
    padding-bottom: 1px;
}

/*  Enable the various `![caption](/image/foo.jpg){.width-full}` uses;
    analogous to width-full tables
 */
figure.width-full {
    position: relative;
    max-width: unset;
}

/*  Floating figures. (Mostly for amusing asides/memes.)
 */
@media all and (min-width: 650px) {
    figure.float-right {
        float: right;
        max-width: calc(50% - 1.5em);
        margin: 0.5em 0 1em 1.5em;
    }
    figure.float-left {
        float: left;
        max-width: calc(50% - 1.5em);
        margin: 0.5em 1.5em 1em 0;
    }
    figure.outline-not {
        margin-bottom: 0.5em;
    }
}

/* try to get edge-to-edge images on mobile to maximize horizontal space usage */
@media all and (max-width: 649px) {
    #markdownBody figure {
        max-width: unset;
    }
}

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

/*  Image alt-text.
    */
img::before {
    content: attr(alt);
    font-family: var(--GW-sans-serif-font-stack);
    display: block;
    padding: 0.5em 0.75em;
    background-color: var(--GW-body-background-color);
    text-align: left;
    box-sizing: border-box;
    height: 100%;
}

/***************/
/* BLOCKQUOTES */
/***************/

/*  Main gray background is implemented in initial.css to avoid ‘flash’ on load.
 */

blockquote {
    /* Avoid problems with floating */
    clear: both;
}

#markdownBody blockquote {
    clear: none;
    overflow: auto;
}

blockquote blockquote {
    margin: 1em 1px;
}

/*=--------------------=*/
/*= Various edge cases =*/
/*=--------------------=*/

.markdownBody blockquote blockquote:first-child {
    margin: 0.25em 1px 1em 1px;
}

.markdownBody blockquote > :last-child,
.markdownBody blockquote > :last-child > :last-child,
.markdownBody blockquote > :last-child > :last-child > :last-child,
.markdownBody blockquote > :last-child > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}
.markdownBody blockquote > :first-child,
.markdownBody blockquote > :first-child > :first-child,
.markdownBody blockquote > :first-child > :first-child > :first-child,
.markdownBody blockquote > :first-child > :first-child > :first-child > :first-child {
    margin-top: 0;
}

/*  Special case for tables in blockquotes.
 */
.markdownBody blockquote > table:last-child,
.markdownBody blockquote > :last-child > table:last-child,
.markdownBody blockquote > :last-child > :last-child > table:last-child,
.markdownBody blockquote > :last-child > :last-child > :last-child > table:last-child {
    margin-bottom: 0.5em;
}
.markdownBody blockquote > table:first-child,
.markdownBody blockquote > :first-child > table:first-child,
.markdownBody blockquote > :first-child > :first-child > table:first-child,
.markdownBody blockquote > :first-child > :first-child > :first-child > table:first-child {
    margin-top: 0.5em;
}

/*  Interviews (e.g. https://gwern.net/Morning-writing#examples).
 */
blockquote p > code:first-child,
blockquote p > a:first-child code:first-child {
    border: none;
    background-color: transparent;
    font-weight: bold;
    font-family: inherit;
    padding: 0;
    font-size: inherit;
}

/*  Tables in blockquotes.
 */
blockquote table {
    font-size: 0.7em;
}
blockquote table table {
    font-size: 1em;
}

/*  Lists in blockquotes.
 */
.markdownBody blockquote li {
    text-align: left;
}

/*  EPITAPH (eg /LARPing)
 */
.text-center {
    text-align: center;
}

/*************/
/* EPIGRAPHS */
/*************/
/* loosely inspired by https://edwardtufte.github.io/tufte-css/#epigraphs */

.epigraph {
    margin: 2em auto;
    padding: 0.5em 2.5em 0.375em 2.5em;
    overflow: hidden;
}
.epigraph blockquote {
    --GW-blockquote-background-color: var(--GW-body-background-color);

    padding: 0;
    border: none;
    background-color: inherit;
    font-size: inherit;
    position: relative;
    z-index: 1;
}
.epigraph blockquote,
#markdownBody .epigraph blockquote {
    overflow: visible;
}
.epigraph > blockquote {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}
.epigraph p  {
    font-style: italic;
    background-color: inherit;
}
/*  Reverse back to normal when italics are used inside an epigraph, or final block.
    */
.epigraph p:first-child em,
.epigraph p:last-child {
    font-style: normal;
}
.epigraph p:last-child {
    margin: 0.5em 0 0 0;
    text-align: right;
    font-size: 0.875em;
    text-indent: 0;
}

.epigraph > blockquote blockquote p,
.epigraph > blockquote blockquote p:last-child {
    text-align: justify;
}

.epigraph > blockquote::before,
.epigraph > blockquote::after {
    display: block;
    position: absolute;
    font-size: 2.5em;
    color: var(--GW-epigraph-quotation-mark-color);
}
.epigraph > blockquote::before {
    content: "\201C";
    left: -0.975em;
    top: -0.5em;
}
.epigraph > blockquote::after {
    content: "\201D";
    right: -0.975em;
    bottom: -1em;
}

/* Quote of the Day styling: too large a gap on desktop */
@media all and (min-width: 650px) {
    #footer .epigraph { margin-top: -1.2em; }
}

@media all and (max-width: 649px) {
    .epigraph {
        margin: 2.125em 1em;
        padding: 0;
        font-size: 0.95em;
        overflow: visible;
    }
    .epigraph > blockquote::before {
        left: -0.375em;
        top: -0.75em;
    }
    .epigraph > blockquote::after {
        right: -0.375em;
        bottom: -1.25em;
    }
    .epigraph + .epigraph {
        margin-top: 2.75em;
    }
}

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

@media all and (min-width: 650px) {
    h1 + .epigraph,
    h3 + .epigraph,
    h5 + .epigraph {
        margin-top: 1.25em;
    }
    h2 + .epigraph,
    h4 + .epigraph,
    h6 + .epigraph {
        margin-top: 1em;
    }
}

/*************/
/* FOOTNOTES */
/*************/

/* make footnotes better: http://bytes.com/topic/html-css/answers/97932-superscript-doesnt-distort-line-spacing#post340658 */
sub,
sup {
    line-height: 0.3em;
    font-feature-settings: 'lnum';
}
a.footnote-ref sup {
    vertical-align: baseline;
    font-size: 0.75em;
}
a.footnote-ref {
    vertical-align: super;
    line-height: 0.3;
    position: relative;
    top: 0.05em;
    padding: 0 0.05em;
    font-feature-settings: 'lnum';
    font-weight: 600;
    z-index: 1;
}
a.footnote-ref::before {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 0.5em);
    height: 125%;
    left: calc(-0.25em - 3px);
    top: -3px;
    z-index: -1;
    border-color: transparent;
    border-style: double;
    border-width: 3px;
    transition:
        background-color 0.15s ease 0.05s,
        border-color 0.15s ease 0.05s;
}
a.footnote-ref.highlighted::before,
a.footnote-ref:hover::before,
a.footnote-ref:target::before,
a.footnote-ref.targeted::before {
    background-color: var(--GW-footnote-ref-highlight-background-color);
    border-color: var(--GW-footnote-ref-highlight-box-shadow-color);
    outline: none;
}

/* Deal with multiple footnote superscripts one after another; per Charuru */
sup + sup,
a.footnote-ref {
    margin-left: 0.125em;
}

.markdownBody .footnotes > ol > li + li {
    margin: 1em 0 0 0;
}

/*  On directory indexes, titles may include ‘19th’ century, which with the
    default size & padding makes the ‘TH’ really stand out. e.g.

    https://gwern.net/doc/sociology/index#johow-et-al-2019-section ‘“HIGH CONSANGUINITY PROMOTES INTERGENERATIONAL WEALTH CONCENTRATION IN SOCIOECONOMICALLY PRIVILEGED KRUMMHÖRN FAMILIES OF THE 18TH AND 19TH CENTURIES”, JOHOW ET AL 2019’
 */
h1 sub, h1 sup, h2 sub, h2 sup {
    font-size: 0.6em;
}
.markdownBody h2 a:link > sub,
.markdownBody h2 a:link > sup {
    padding-left: 0em;
}

/*=------------------------=*/
/*= Back-to-citation links =*/
/*=------------------------=*/

.footnotes .footnote-back {
    margin: 0 0 0 0.5em;
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 0.5;
    text-indent: 0;
    border: 1px dotted var(--GW-footnote-backlink-border-color);
    top: 0.15em;
    padding: 0.1em 0.25em 0.15em 0.25em;
    width: 1em;
    z-index: 1;
}
.markdownBody .footnotes a.footnote-back {
    background-image: none;
}
.markdownBody .footnotes a.footnote-back:hover {
    border-color: var(--GW-footnote-backlink-border-hover-color);
    border-style: solid;
    box-shadow:
        0 0 0 1px var(--GW-body-background-color) inset,
        0 0 0 2px var(--GW-footnote-backlink-border-hover-color) inset;

}

/*=----------------------------------------------=*/
/*= Special styling adjustments within footnotes =*/
/*=----------------------------------------------=*/

.footnotes li {
    position: relative;
}
.footnotes blockquote + a.footnote-back,
.footnotes pre + a.footnote-back,
.footnotes .sourceCode + a.footnote-back {
    position: absolute;
    right: 0;
    top: calc(100% - 1px);
    background-color: var(--GW-footnote-backlink-after-bordered-block-background-color);
}

/*=-----------=*/
/*= 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(--GW-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(--GW-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(--GW-footnote-highlighted-border-color);
    box-shadow:
        0 0 0 1px var(--GW-body-background-color) inset,
        0 0 0 2px var(--GW-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: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(--GW-footnotes-section-top-rule-color);
    width: 2em;
    height: 2em;
    background-color: var(--GW-body-background-color);
    z-index: 1;
    box-shadow:
        0 0 0 calc(0.5em - 1px) var(--GW-body-background-color) inset,
        0 0 0 0.5em var(--GW-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(--GW-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(--GW-footnote-highlighted-border-color);
    box-shadow:
        0 0 0 1px var(--GW-body-background-color) inset,
        0 0 0 2px var(--GW-footnote-highlighted-border-color) inset,
        0 0 0 calc(0.5em - 1px) var(--GW-body-background-color) inset,
        0 0 0 0.5em var(--GW-footnote-highlighted-border-color) inset,
        0 0 0 calc(0.5em + 1px) var(--GW-body-background-color) inset,
        0 0 0 calc(0.5em + 2px) var(--GW-footnote-highlighted-border-color) inset;
}
section.footnotes:target > hr:first-child::before,
section.footnotes > hr:first-child.highlighted::before {
    background-color: var(--GW-body-background-color);
    box-shadow:
        0 1px 0 0 var(--GW-footnote-highlighted-border-color) inset,
        0 -1px 0 0 var(--GW-footnote-highlighted-border-color) inset;
    height: 3px;
}

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

.sidenote-layout-cell {
    position: absolute;
    width: 100%;
    pointer-events: none;
}
.sidenote-layout-cell > * {
    pointer-events: auto;
}

#sidenote-column-left,
#sidenote-column-right,
#hidden-sidenote-storage {
    font-size: 0.85em;
    width: calc(50vw - (50% + 96px));
    max-width: var(--GW-sidenotes-max-width);
}

#sidenote-column-left,
#sidenote-column-right {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
#sidenote-column-left {
    height: calc(100% - 7rem);
    top: 7rem;
    right: calc(100% + 64px);
}
#sidenote-column-right {
    height: 100%;
    top: 0;
    left: calc(100% + 64px);
}
#sidenote-column-left:empty,
#sidenote-column-right:empty {
    display: none;
}

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

.sidenote {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.85;
    line-height: 1.5;
    padding: 2em 0 0 0;
    transition:
        opacity 0.25s ease-in,
        transform 0.25s ease-in;
}
.sidenote.displaced {
    transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out;
}
.sidenote.hidden {
    display: none;
}
.sidenote.displaced,
.sidenote.highlighted,
.sidenote:hover,
.sidenote:target,
.sidenote.targeted {
    background-color: var(--GW-sidenote-highlight-background-color);
    opacity: 1.0;
    box-shadow: 0 0 0 16px var(--GW-sidenote-highlight-background-color);
}
.sidenote:target {
    z-index: 1;
}
.sidenote.displaced {
    z-index: 2;
}
.sidenote.highlighted,
.sidenote:hover {
    z-index: 3;
}

/*  This provides a solid hover margin.
    */
.sidenote::after {
    content: "";
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -13px;
    left: -13px;
}
.sidenote.displaced::after,
.sidenote.highlighted::after,
.sidenote:hover::after,
.sidenote:target::after,
.sidenote.targeted::after {
    border: 3px double var(--GW-sidenote-highlight-box-shadow-color);
}

.sidenote.cut-off::before {
    content: "…";
    position: absolute;
    border: 1px dotted var(--GW-sidenote-border-color);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2;
    background-color: var(--GW-body-background-color);
    padding: 0.125em 0.5em 0.5em 0.5em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 0.5;
    pointer-events: none;
}
.sidenote.cut-off.hide-more-indicator::before {
    visibility: hidden;
}

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

/*  Outer wrapper (scrolls).
    */
.sidenote-outer-wrapper {
    max-height: 600px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-style: dotted;
    border-color: var(--GW-sidenote-border-color);
    border-width: 1px 0;
}
.sidenote.cut-off .sidenote-outer-wrapper {
    overflow-y: auto;
    overscroll-behavior: none;
    width: 100%;
    padding: 0 0.5em 0 0;
}

/*  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(--GW-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(--GW-sidenote-scrollbar-thumb-color) var(--GW-sidenote-scrollbar-track-color);
}
.sidenote.cut-off .sidenote-outer-wrapper:hover {
    scrollbar-color: var(--GW-sidenote-scrollbar-thumb-hover-color) var(--GW-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 {
    --GW-list-left-padding: 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(--GW-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(--GW-body-text-color);
    font-family: var(--GW-serif-font-stack);
}
.marginnote.inline {
    color: inherit;
}
.marginnote.sidenote {
    display: flex;
    justify-content: right;
    /*  925px 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 `(925px / 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 - ((925px / 2) + 96px));
    max-width: var(--GW-sidenotes-max-width);
    right: calc(100% + 64px);
    left: unset;

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

    font-size: calc(var(--GW-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 .marginnote-inner-wrapper {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
}

.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 + 96px));
}

/**********/
/* 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(--GW-table-border-color);
    border-width: 2px 0;
}

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

.table-wrapper.width-full .full-width-table-inner-wrapper {
    background-color: var(--GW-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(--GW-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(--GW-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(--GW-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(--GW-table-scrollbar-track-color) inset,
        0 0   0 1px var(--GW-table-scrollbar-border-color) inset,
        0 2px 0 1px var(--GW-table-scrollbar-border-color) inset;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
}
@media only screen and (max-width: 649px) {
    .table-wrapper::-webkit-scrollbar {
        height: 6px;
    }
}

/*  Horizontal scroll bar styles (for Firefox).
    */
.table-wrapper {
    scrollbar-color: var(--GW-table-scrollbar-thumb-color) var(--GW-table-scrollbar-track-color);
}
.table-wrapper:hover {
    scrollbar-color: var(--GW-table-scrollbar-thumb-hover-color) var(--GW-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/img/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(--GW-table-column-heading-hover-background-color);
}
th.tablesorter-header:focus {
    outline: none;
}
th.tablesorter-headerAsc {
    background-image: url('/static/img/tablesorter/tablesorter-asc.gif');
}
th.tablesorter-headerDesc {
    background-image: url('/static/img/tablesorter/tablesorter-desc.gif');
}
th.tablesorter-headerAsc,
th.tablesorter-headerDesc,
th.tablesorter-headerAsc:hover,
th.tablesorter-headerDesc:hover {
    background-color: var(--GW-table-sorted-column-heading-background-color);
    color: var(--GW-table-sorted-column-heading-text-color);
    text-shadow:
       0.5px 0.5px 0 var(--GW-table-sorted-column-heading-text-shadow-color),
       0 0 1px var(--GW-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(--GW-table-zebra-stripe-alternate-row-background-color);
    --GW-link-underline-background-color: var(--GW-table-zebra-stripe-alternate-row-background-color);
}
.markdownBody table tbody tr:hover {
    outline: 1px dotted var(--GW-table-row-hover-outline-color);
}

/* Floating tables: float small by default because if they are 'small', they don't need the full body column */
.table-small.float-left { float: left;
                          max-width: calc(50% - 1.5em);
                          margin: 1.5em 1.5em 1em 0;
                        }
/* We may wish to alternate side for many small tables in success: */
.table-small.float-right { float: right;
                           max-width: calc(50% - 1.5em);
                           margin: 1.5em 0 1em 1em;
                         }

/*  Tables in blockquotes.
    */
blockquote :not(.small-table) > table {
    --GW-table-zebra-stripe-alternate-row-background-color: var(--GW-body-background-color);
}
blockquote table th + th,
blockquote table td + td {
    border-left: 1px solid var(--GW-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(--GW-pre-element-scrollbar-track-color);
}
pre::-webkit-scrollbar-thumb {
    background-color: var(--GW-pre-element-scrollbar-thumb-color);
    box-shadow:
        0 0 0 3px var(--GW-pre-element-scrollbar-track-color) inset;
}
pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--GW-pre-element-scrollbar-thumb-hover-color);
}
@media only screen and (max-width: 649px) {
    pre::-webkit-scrollbar {
        height: 10px;
    }
}

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

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

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

    border: 1px solid var(--GW-code-element-border-color);
    background-color: var(--GW-code-element-background-color);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    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(--GW-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(--GW-pre-element-border-color);
    background-color: var(--GW-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(--GW-syntax-highlight-color-normal); } /* Normal */
code span.at { color: var(--GW-syntax-highlight-color-attribute); } /* Attribute */
code span.dt { color: var(--GW-syntax-highlight-color-data-type); font-weight: bold; font-style: italic  } /* DataType */
code span.va { color: var(--GW-syntax-highlight-color-variable); font-weight: bold; font-style: italic } /* Variable */
code span.ot { color: var(--GW-syntax-highlight-color-other); font-weight: bold; font-style: italic } /* Other */
code span.pp { color: var(--GW-syntax-highlight-color-preprocessor); font-weight: bold; font-style: italic } /* Preprocessor */
code span.ex { color: var(--GW-syntax-highlight-color-extension); font-style: italic } /* Extension */
code span.co { color: var(--GW-syntax-highlight-color-comment); } /* Comment */
code span.cf { color: var(--GW-syntax-highlight-color-control-flow); font-weight: bold; } /* ControlFlow */
code span.kw { color: var(--GW-syntax-highlight-color-keyword); font-weight: bold; } /* Keyword */
code span.op { color: var(--GW-syntax-highlight-color-operator); } /* Operator */
code span.sc { color: var(--GW-syntax-highlight-color-special-char); } /* SpecialChar */
code span.bu { color: var(--GW-syntax-highlight-color-built-in); font-weight: bold; } /* BuiltIn */
code span.fu { color: var(--GW-syntax-highlight-color-function); } /* Function */
code span.cn { color: var(--GW-syntax-highlight-color-constant); font-weight: bold; } /* Constant */
code span.dv { color: var(--GW-syntax-highlight-color-dec-val); font-weight: bold; } /* DecVal */
code span.bn { color: var(--GW-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(--GW-syntax-highlight-color-float);  font-weight: bold; font-feature-settings: 'ss01'; } /* Float */
code span.in { color: var(--GW-syntax-highlight-color-information); font-weight: bold; } /* Information */
code span.ch { color: var(--GW-syntax-highlight-color-char); font-style: italic; } /* Char */
code span.st { color: var(--GW-syntax-highlight-color-string); font-style: italic; } /* String */
code span.ss { color: var(--GW-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(--GW-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(--GW-syntax-highlight-color-alert); text-decoration: double underline; font-weight: bold; } /* Alert */
code span.er { color: var(--GW-syntax-highlight-color-error); } /* Error */
code span.im { color: var(--GW-syntax-highlight-color-import); font-weight: bold; font-style: italic } /* Import */

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

.mjpage__block {
    overflow-y: hidden;
    margin: 1.25em auto;
    background-color: var(--GW-math-block-background-color);
    padding: 0.5em 0.5em 0.375em 0.5em;
    box-shadow:
        0 0 0 1px var(--GW-math-block-scrollbar-border-color) inset;
    transition:
        background-color 0.15s ease-out;
}
.mjpage__block.flash {
    background-color: var(--GW-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(--GW-math-block-scrollbar-border-color);
    background-color: var(--GW-math-block-scrollbar-track-color);
}
.mjpage__block::-webkit-scrollbar-thumb {
    box-shadow:
        0 0 0 2px var(--GW-math-block-scrollbar-track-color) inset,
        0 0 0 8px var(--GW-math-block-scrollbar-thumb-color) inset;
    border-color: var(--GW-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(--GW-math-block-scrollbar-track-color) inset,
        0 0 0 8px var(--GW-math-block-scrollbar-thumb-hover-color) inset;
}
@media only screen and (max-width: 649px) {
    .mjpage__block::-webkit-scrollbar {
        height: 10px;
    }
}

/*  Horizontal scroll bar styles (for Firefox).
    */
.mjpage__block {
    scrollbar-color: var(--GW-math-block-scrollbar-thumb-color) var(--GW-math-block-scrollbar-track-color);
}
.mjpage__block:hover {
    scrollbar-color: var(--GW-math-block-scrollbar-thumb-hover-color) var(--GW-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(--GW-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(--GW-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;
}

/********/
/* 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;
}

/*  SUBSCRIPT+SUPERSCRIPT (necessary for inflation adjuster, and other math)
 */
.subsup {
    margin-left: 0.15em;
    margin-right: 0.1em;
    text-indent: 0; /* override the `p + p { text-indent: 2.5em; }` */
    display: inline-flex;
    flex-flow: column;
    align-items: flex-start;
    vertical-align: text-bottom;
    position: relative;
    bottom: -0.1em;
}
.subsup sup,
.subsup sub {
    position: relative;
    font-size: 0.7em;
    line-height: 1;
}
/*  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.inflation-adjusted {
    white-space: nowrap;
}
span.inflation-adjusted .subsup {
    align-items: flex-end;
}

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 all and (min-width: 650px) {
    *[class*='drop-cap-'].overlap-not {
        min-height: 6em;
    }
    *[class*='drop-cap-']::first-letter,
    *[class*='drop-cap-'] > p:first-child::first-letter {
        font-style: normal;
        font-weight: normal;
        float: left;
    }

    /*  All of these numbers are magic.
        */
    .drop-cap-goudy::first-letter,
    .drop-cap-goudy > p:first-child::first-letter {
        font-family: "Goudy Initialen";
        font-size: 7em;
        line-height: 1;
        margin: 0.025em 0.02em -0.25em 0;
    }
    .drop-cap-yinit::first-letter,
    .drop-cap-yinit > p:first-child::first-letter {
        font-family: Yinit;
        font-size: 5.625em;
        line-height: 1.35;
        margin: 0.07em 0.08em -0.5em 0;
        text-shadow: 0 0 0 var(--GW-drop-caps-yinit-text-shadow-color);
        color: var(--GW-drop-caps-yinit-color);
    }
    .drop-cap-de-zs::first-letter,
    .drop-cap-de-zs > p:first-child::first-letter {
        font-family: "Deutsche Zierschrift";
        font-size: 6.625em;
        line-height: 1.1;
        margin: 0.01em 0.03em -0.25em 0;
        color: var(--GW-drop-caps-de-zs-color);
    }
    .drop-cap-cheshire::first-letter,
    .drop-cap-cheshire > p:first-child::first-letter {
        font-family: "Cheshire Initials";
        font-size: 6.75em;
        line-height: 1;
        margin: 0.045em 0.05em -0.25em 0;
        color: var(--GW-drop-caps-cheshire-color);
    }
    .drop-cap-kanzlei::first-letter,
    .drop-cap-kanzlei > p:first-child::first-letter {
        font-family: "Kanzlei Initialen";
        font-size: 7em;
        line-height: 1;
        margin: 0.025em 0.025em -0.25em -0.03em;
        color: var(--GW-drop-caps-kanzlei-color);
    }

    /*  Compensating for responsive line-height reduction.
        */
    @media all and (max-width: 1200px) {
        .drop-cap-goudy::first-letter,
        .drop-cap-goudy > p:first-child::first-letter {
            font-size: 6.875em;
        }
        .drop-cap-yinit::first-letter,
        .drop-cap-yinit > p:first-child::first-letter {
            font-size: 5.375em;
        }
        .drop-cap-de-zs::first-letter,
        .drop-cap-de-zs > p:first-child::first-letter {
            font-size: 6.5em;
        }
        .drop-cap-cheshire::first-letter,
        .drop-cap-cheshire > p:first-child::first-letter {
            font-size: 6.625em;
        }
        .drop-cap-kanzlei::first-letter,
        .drop-cap-kanzlei > p:first-child::first-letter {
            font-size: 6.875em;
        }
    }
    @media all and (max-width: 1000px) {
        .drop-cap-goudy::first-letter,
        .drop-cap-goudy > p:first-child::first-letter {
            font-size: 6.625em;
        }
        .drop-cap-yinit::first-letter,
        .drop-cap-yinit > p:first-child::first-letter {
            font-size: 5.25em;
        }
        .drop-cap-de-zs::first-letter,
        .drop-cap-de-zs > p:first-child::first-letter {
            font-size: 6.25em;
        }
        .drop-cap-cheshire::first-letter,
        .drop-cap-cheshire > p:first-child::first-letter {
            font-size: 6.3125em;
        }
        .drop-cap-kanzlei::first-letter,
        .drop-cap-kanzlei > p:first-child::first-letter {
            font-size: 6.6875em;
        }
    }

    /*  Special styles for special browsers.
        */
    @supports (-moz-user-focus: normal) {
        .drop-cap-goudy::first-letter,
        .drop-cap-goudy > p:first-child::first-letter {
            margin: 0.05em 0.02em 0 0;
        }
        .drop-cap-yinit::first-letter,
        .drop-cap-yinit > p:first-child::first-letter {
            margin: 0.06em 0.06em 0 0;
        }
        .drop-cap-de-zs::first-letter,
        .drop-cap-de-zs > p:first-child::first-letter {
            margin: 0.06em 0.04em 0 0;
        }
        .drop-cap-cheshire::first-letter,
        .drop-cap-cheshire > p:first-child::first-letter {
            margin: 0.06em 0.04em 0 0;
        }
        .drop-cap-kanzlei::first-letter,
        .drop-cap-kanzlei > 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-archive#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: 12em;
    column-gap: 3em;
    margin-bottom: 2em;

    /*  Without `clear`, columns don’t render properly if there’s a float.
     */
    clear: both;
}
.columns:first-child > ul,
.columns:first-child > ol {
    margin-top: 1em;
}
.columns:last-child > ul,
.columns:last-child > ol {
    margin-bottom: 1em;
}
.markdownBody .columns li,
.markdownBody .columns li p {
    text-align: left;
    break-inside: avoid;
}

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

.columns ul {
    padding-left: 1.5em;
}


/***************/
/* 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-text-color: currentColor;

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

    font-family: var(--GW-sans-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: 2.875em solid var(--admonition-left-border-color);
    background-color: var(--admonition-background-color);
}
.admonition-title {
    font-weight: bold;
}

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

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

.admonition.tip::before {
    content: url('/static/img/icon/info-circle.svg');
}
.admonition.note::before {
    content: url('/static/img/icon/arrow-right-white.svg');
    padding: 0.85em;
}
.admonition.warning::before {
    content: url('/static/img/icon/exclamation-triangle-white.svg');
    padding-top: 0.75em;
}
.admonition.error::before {
    content: url('/static/img/icon/skull-crossbones-white.svg');
    padding: 0.75em;
}

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

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

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

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

.admonition.warning,
.admonition.error {
    --GW-link-underline-gradient-line-color: var(--GW-admonition-reversed-link-underline-gradient-line-color);
    --GW-link-underline-gradient-line-color-hover: var(--GW-admonition-reversed-link-underline-gradient-line-color-hover);
    --GW-footnote-ref-highlight-background-color: var(--GW-admonition-reversed-footnote-ref-highlight-background-color);
}
.admonition.warning {
    --GW-dotted-underline-background-image: url('data:image/gif;base64,R0lGODlhBAACAPAAMZqamv///ywAAAAABAACAAACBEwAhgUAOw==');
}
.admonition.error {
    --GW-dotted-underline-background-image: url('data:image/gif;base64,R0lGODlhBAACAPAAMVpaWv///ywAAAAABAACAAACBEwAhgUAOw==');
}
.admonition.warning a,
.admonition.error a {
    color: var(--GW-admonition-reversed-link-color);
}
.admonition.warning a:hover,
.admonition.error a:hover {
    color: var(--GW-admonition-reversed-link-color-hover);
}

.admonition.warning a[data-link-icon-type='svg']::after,
.admonition.error a[data-link-icon-type='svg']::after {
    filter: invert(1);
}

/*  Admonitions in/as page abstracts (e.g. /haskell/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;
}

/*************/
/* CITATIONS */
/*************/

/* Citation formatting: ellipsis'd "et al", subscripted date; see /subscripts & /lorem#citation-variants */
/* This is variant #6, 'HORIZONTAL ELLIPSIS/​subscripted year'. */
/* This relies on the 'citefyInline' pass in Typography.hs: the author ('Foo', or 'Foo & Bar') is put in span.cite-author, the 'et al' joiner (if any) in span.cite-joiner, and the year date in span.cite-date. For 'Foo 2020' or 'Foo & Bar 2020', there is no joiner, only for 'et al'; this lets us replace the et al with an ellipsis while subscripting the year in all cases. */
/*  Author
 */
.cite-author-plural::after {
    content: "...";
    margin-left: 0.05em;
    margin-right: -0.05em;
}
a .cite-author-plural::after {
    margin-right: 0;
}

/*  “et al”
 */
.cite-joiner {
    display: none;
}

/*  Date
 */
.cite-date {
    vertical-align: -0.35ex;
    position: relative;
    font-size: 0.8em;
    line-height: 0.7;
    font-variant-numeric: tabular-nums;
    margin-left: 0.1em;
    white-space: nowrap;
}

/******************************/
/* “FURTHER READING” SECTIONS */
/******************************/

#further-reading .columns ul {
    margin-top: 0.5em;
    padding-left: 2.5em;
}
@media all and (max-width: 649px) {
    #further-reading .columns ul {
        padding-left: 1.75em;
    }
}

#further-reading > div + div {
    margin-top: 1.5em;
}


/*******************************/
/* PAGE-SPECIFIC MODIFICATIONS */
/*******************************/

/*=------------=*/
/*= Index page =*/
/*=------------=*/

/*  Link bibliography on index page. */
body.index section#link-bibliography {
    grid-column: 1 / span 2;
}

/*  Index’s special appearance requires some more v-space for the nav UI. */
body.index #navigation {
    margin: 2.5em 0 0.5em 0;
}

/*  Less fancy headings. */
body.index section:not(.collapse) > h1:first-child {
    font-size: 1.5em;
    line-height: 1.125;
    box-shadow: none;
    text-align: left;
    font-weight: bold;
    margin-left: 0;
    padding: 0;
}
/*  No pilcrows. */
body.index #markdownBody section > h1:first-child a::after {
    display: none;
}

/* For desktop users, we hide the horizontal rulers on the /index page as they are unnecessary given the flowing columns; for mobile users, we'll separate sections by rulers because they only get a single very long column to scroll through, which lacks a sense of hierarchy/chunking. However, desktop users still get the initial <hr> inserted by sed to divide the two blocks of New/Popular/Notable from all-topics sections (which has no class set on it). */
@media all and (min-width: 650px) {
/*  Horizontal ruler on the home page.
    */
    body.index hr {
        margin: 1.5em 0 0;
    }
    body.index [class^='horizontal-rule'] {
        display: none;
    }
}

/*  Back-to-top link on home page.
    */
@media only screen and (max-width: 1144px) {
    body.index #back-to-top {
        left: 4rem;
    }
}
@media only screen and (min-width: 1145px) {
    body.index #back-to-top {
        left: calc(108px + (100% - 1145px)/2);
        right: unset;
    }
}
@media only screen and (min-width: 1761px) {
    body.index #back-to-top {
        left: calc(64px + (100% - 1145px)/2);
    }
}
@media only screen and (max-width: 649px) {
    body.index #back-to-top {
        left: unset;
    }
}

/*=-------------=*/
/*= /index-long =*/
/*=-------------=*/

body.index-long section > .include-wrapper-block + .include-wrapper-block {
    margin-top: 2.5em;
}

/*=----------------=*/
/*= /review/book =*/
/*=----------------=*/

#markdownBody .book-review-meta {
    margin: -0.5em 0 1.5em 0;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    max-width: 100%;
}
.book-review-meta span {
    white-space: nowrap;
}
.book-review-meta span + span {
    margin-left: 1em;
}
.book-review-meta span:first-of-type {
    flex: 0 1 auto;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.book-review-meta span:first-of-type:hover {
    overflow: visible;
    white-space: normal;
    text-align: left;
    height: 1em;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

/*=---------------=*/
/*= /review/mead =*/
/*=---------------=*/

/*  This is for the pictures of mead bottles next to the reviews.
    */
body.review-mead p > img {
    float: right;
    max-height: 8em;
    width: auto;
    position: relative;
    z-index: 1;
    margin: 1em 1em 1em 2em;
}

/*=-------=*/
/*= /hafu =*/
/*=-------=*/

body.hafu .table-wrapper#hafu-list-table td:last-of-type {
    width: 50%;
}

/*=--------------=*/
/*= /dnm-arrest =*/
/*=--------------=*/

body.dnm-arrest .table-wrapper#data-table td:nth-of-type(6),
body.dnm-arrest .table-wrapper#data-table td:nth-of-type(12),
body.dnm-arrest .table-wrapper#data-table td:nth-of-type(13) {
    white-space: nowrap;
}
body.dnmarrest .table-wrapper#data-table td:last-of-type {
    width: 20%;
}

/*=--------=*/
/*= /lorem =*/
/*=--------=*/

body.lorem div[class^='drop-cap'] {
    margin: 1em 0 0 0;
}

/****************************/
/* DIRECTORY INDEX LISTINGS */
/****************************/
/* trim down appearance of UI elements not useful on listing pages (but without the other modifications for the primary /index. */

body.index-directory #sidebar a.patreon,
body.index-directory #page-tags,
body.index-directory #page-metadata-block,
body.index-directory #TOC,
body.index-directory #navigation,
body.index-directory #footer {
    display: none;
}

/*************************/
/* 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;
}

/***************/
/* IMAGE FOCUS */
/***************/

/*=--------=*/
/*= Colors =*/
/*=--------=*/

:root {
    --SA-image-focus-sans-serif-font-stack: var(--GW-sans-serif-font-stack);

    --SA-image-focus-image-hover-drop-shadow-color: var(--GW-image-focus-image-hover-drop-shadow-color);
    --SA-image-focus-overlay-background-color: #000;
    --SA-image-focus-overlay-image-caption-background-color: rgba(0, 0, 0, 0.7);
    --SA-image-focus-overlay-image-caption-text-color: #fff;
    --SA-image-focus-overlay-image-caption-link-color: #ccc;
    --SA-image-focus-overlay-image-caption-link-hover-color: #aaa;
    --SA-image-focus-overlay-help-box-background-color: rgba(0, 0, 0, 0.85);
    --SA-image-focus-overlay-help-box-text-color: #fff;
    --SA-image-focus-overlay-info-icon-color: #000;
    --SA-image-focus-overlay-info-icon-drop-shadow-color: #fff;
    --SA-image-focus-overlay-image-number-text-color: #000;
    --SA-image-focus-overlay-image-number-text-shadow-color: #fff;
    --SA-image-focus-overlay-slideshow-button-color: #ddd;
    --SA-image-focus-overlay-slideshow-button-hover-background-color: rgba(0, 0, 0, 0.1);
    --SA-image-focus-overlay-slideshow-button-hover-color: #777;
    --SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color: #fff;
    --SA-image-focus-overlay-slideshow-button-active-color: #888;
    --SA-image-focus-overlay-slideshow-button-disabled-color: #ddd;
    --SA-image-focus-image-hover-tooltip-background-color: rgba(0, 0, 0, 0.75);
    --SA-image-focus-image-hover-tooltip-text-color: #fff;
}

/*=--------------=*/
/*= Hover styles =*/
/*=--------------=*/

.markdownBody img.focusable:hover {
/*     filter: drop-shadow(0 0 3px var(--SA-image-focus-image-hover-drop-shadow-color)); */
    cursor: zoom-in;
    box-shadow: 0 0 10px 0 var(--SA-image-focus-image-hover-drop-shadow-color);
}
.markdownBody img.focusable:active {
    transform: scale(0.975);
}

/*=---------=*/
/*= Overlay =*/
/*=---------=*/

#image-focus-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: none;
    cursor: zoom-out;
}
#image-focus-overlay::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--SA-image-focus-overlay-background-color);
    opacity: 0.9;
    z-index: -1;
}
#image-focus-overlay.engaged {
    display: initial;
}

#image-focus-overlay img {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*=-------------------=*/
/*= Single-image mode =*/
/*=-------------------=*/

#image-focus-overlay:not(.slideshow) .image-number,
#image-focus-overlay:not(.slideshow) .slideshow-buttons,
#image-focus-overlay:not(.slideshow) .slideshow-help-text {
    display: none;
}

/*=---------=*/
/*= Caption =*/
/*=---------=*/

#image-focus-overlay .caption {
    position: absolute;
    bottom: 0.75em;
    background-color: var(--SA-image-focus-overlay-image-caption-background-color);
    left: 4.5em;
    right: 4.5em;
    margin: auto;
    max-width: calc(100% - 9em);
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
    font-family: var(--SA-image-focus-sans-serif-font-stack);
    border-radius: 8px;
    z-index: 1;
    transition:
        bottom 0.15s ease;
}
#image-focus-overlay .caption.hidden {
    bottom: -50%;
    transition:
        bottom 0.5s ease-in;
}

#image-focus-overlay .caption p {
    margin: 1em 1.25em;
    color: var(--SA-image-focus-overlay-image-caption-text-color);
}
#image-focus-overlay .caption code {
    background-color: inherit;
    border: none;
    font-size: 1em;
}
#image-focus-overlay .caption a {
    color: var(--SA-image-focus-overlay-image-caption-link-color);
}
#image-focus-overlay .caption a:hover {
    color: var(--SA-image-focus-overlay-image-caption-link-hover-color);
}

#image-focus-overlay .caption:not(:empty)::before {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: calc(100% + 1.5em);
    z-index: -1;
    top: -0.75em;
    left: calc(-50vw + 50%);
}

/*=--------------=*/
/*= Help overlay =*/
/*=--------------=*/

#image-focus-overlay .help-overlay {
    position: absolute;
    display: flex;
    flex-flow: column;
    z-index: 3;
    font-family: var(--SA-image-focus-sans-serif-font-stack);
    font-size: 1.25rem;
    padding: 1em;
    border-radius: 10px;
    bottom: 1em;
    right: 1em;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    cursor: help;
    visibility: hidden;
    transition:
        visibility 1s ease,
        color 1s ease,
        background-color 1s ease,
        bottom 0.3s ease;
}
#image-focus-overlay .help-overlay:hover {
    max-width: 24em;
    max-height: 14em;
    background-color: var(--SA-image-focus-overlay-help-box-background-color);
    color: var(--SA-image-focus-overlay-help-box-text-color);
    visibility: visible;
    transition:
        visibility 0.2s ease 0.3s,
        color 0.2s ease 0.3s,
        background-color 0.2s ease 0.3s;
}

#image-focus-overlay .help-overlay::after {
    content: "?";
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px;
    color: var(--SA-image-focus-overlay-info-icon-color);
    filter: drop-shadow(0 0 6px var(--SA-image-focus-overlay-info-icon-drop-shadow-color));
    visibility: visible;
    opacity: 0.85;
    transition:
        visibility 1s ease;
}
#image-focus-overlay .help-overlay:hover::after {
    visibility: hidden;
    transition:
        visibility 0.2s ease 0.3s;
}

#image-focus-overlay .help-overlay p {
    margin: 0;
    text-indent: -2em;
    padding-left: 2em;
    max-width: 100%;
    overflow: hidden;
}
#image-focus-overlay .help-overlay p + p {
    margin: 0.75em 0 0 0;
}
#image-focus-overlay .help-overlay.hidden {
    bottom: -2em;
}

/*=--------------=*/
/*= Slide number =*/
/*=--------------=*/

#image-focus-overlay .image-number {
    position: absolute;
    z-index: 2;
    font-family: var(--SA-image-focus-sans-serif-font-stack);
    font-size: 1.5rem;
    left: 1em;
    top: 1em;
    font-weight: 600;
    color: var(--SA-image-focus-overlay-image-number-text-color);
    text-shadow:
        0 0  3px var(--SA-image-focus-overlay-image-number-text-shadow-color),
        0 0  5px var(--SA-image-focus-overlay-image-number-text-shadow-color),
        0 0  8px var(--SA-image-focus-overlay-image-number-text-shadow-color),
        0 0 13px var(--SA-image-focus-overlay-image-number-text-shadow-color);
    width: 1.5em;
    text-align: right;
    white-space: nowrap;
    transition: top 0.3s ease;
}
#image-focus-overlay .image-number::before {
    content: "#";
    opacity: 0.3;
}
#image-focus-overlay .image-number::after {
    content: " of " attr(data-number-of-images);
    opacity: 0.3;
}
#image-focus-overlay .image-number:hover::before,
#image-focus-overlay .image-number:hover::after {
    opacity: 1.0;
}
#image-focus-overlay .image-number.hidden {
    top: -1.25em;
}

/*=-------------------=*/
/*= Slideshow buttons =*/
/*=-------------------=*/

#image-focus-overlay .slideshow-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
#image-focus-overlay .slideshow-buttons button {
    font-size: 3rem;
    color: var(--SA-image-focus-overlay-slideshow-button-color);
    border: none;
    background-color: transparent;
    position: relative;
    left: 0;
    transition:
        left 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    width: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}
#image-focus-overlay .slideshow-buttons button.next {
    padding: 0.25em 0.25em 0.25em 0.375em;
}
#image-focus-overlay .slideshow-buttons button.previous {
    padding: 0.25em 0.375em 0.25em 0.25em;
}
#image-focus-overlay .slideshow-buttons button svg {
    pointer-events: none;
    fill: currentColor;
}
#image-focus-overlay .slideshow-buttons button::selection {
    background-color: transparent;
}
@media only screen and (hover: hover) {
    #image-focus-overlay .slideshow-buttons button:hover {
        background-color: var(--SA-image-focus-overlay-slideshow-button-hover-background-color);
        color: var(--SA-image-focus-overlay-slideshow-button-hover-color);
    }
    #image-focus-overlay .slideshow-buttons button:not(:disabled):hover svg {
        filter:
            drop-shadow(0 0 1px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color))
            drop-shadow(0 0 3px var(--SA-image-focus-overlay-slideshow-button-hover-drop-shadow-color));
    }
}
#image-focus-overlay .slideshow-buttons button:active {
    transform: none;
    color: var(--SA-image-focus-overlay-slideshow-button-active-color);
}
#image-focus-overlay .slideshow-buttons button:disabled {
    text-shadow: none;
    background-color: transparent;
    color: var(--SA-image-focus-overlay-slideshow-button-disabled-color);
    cursor: default;
    opacity: 0.4;
}
#image-focus-overlay .slideshow-button.previous.hidden {
    left: -1.75em;
}
#image-focus-overlay .slideshow-button.next.hidden {
    left: 1.75em;
}

/*=---------=*/
/*= Tooltip =*/
/*=---------=*/

.image-wrapper {
    position: relative;
    display: block;
    margin: auto;
    max-width: 100%;
}
.image-wrapper.focusable::after {
    content: "Click to enlarge";
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0.5em;
    padding: 0.3em 0.75em 0.35em 0.75em;
    font-size: 1rem;
    font-family: var(--SA-image-focus-sans-serif-font-stack);
    background-color: var(--SA-image-focus-image-hover-tooltip-background-color);
    color: var(--SA-image-focus-image-hover-tooltip-text-color);
    border-radius: 0.25em;
    opacity: 0.0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.image-wrapper,
.image-wrapper::after {
    width: -moz-fit-content;
    width: fit-content;
}
.image-wrapper.focusable:hover::after {
    opacity: 1.0;
}

/**************/
/* POP-FRAMES */
/**************/

.popframe .popframe-title-link::after {
    display: none;
}

.popframe .popframe-title-link-archived::after {
    content: none;
}

.popframe .popframe-title .separator {
    margin: 0 0.5em;
}

/*=-------------------=*/
/*= POP-FRAME CONTENT =*/
/*=-------------------=*/
/*  Adjustments for styles in pop-frames.
    */

.popframe-body .TOC {
    margin: 1.25em 0 0 0;
    padding: 0.5em 0.5em 0.75em 0.75em;

    /*  The following three properties are to prevent both overlap and
        margin-collapse of the TOC when there’s a floated thumbnail figure
        that juts down below the abstract text.
     */
    clear: both;
    display: inline-block;
    width: calc(100% - 1.25em);    /* Subtract side padding. */
}

.popframe-body .TOC a:hover::after {
    margin: 0;
    bottom: unset;
    font-size: inherit;
    opacity: unset;
}

.popframe-body > section:only-child {
    display: contents;
}

.popframe-body ul,
.popframe-body ol {
    overflow: unset;
}

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

.popframe-body p + ul,
.popframe-body p + ol {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.popframe-body li,
.popframe-body li p {
    text-align: left;
}

.popframe-body h1,
.popframe-body h2,
.popframe-body h3,
.popframe-body h4,
.popframe-body h5,
.popframe-body h6 {
    margin-left: 0;
}
.popframe-body h1 a:link,
.popframe-body h2 a:link,
.popframe-body h3 a:link,
.popframe-body h4 a:link,
.popframe-body h5 a:link,
.popframe-body h6 a:link {
    background-image: none;
    text-shadow: none;
}

.popframe-body blockquote {
    margin: 1em 0;
}

.popframe-body > figure:only-child {
    margin: 0;
    max-width: unset;
}

.popframe-body.local-page > blockquote:first-child,
.popframe-body.local-page > .table-wrapper:first-child,
.popframe-body.local-page > div.sourceCode:first-child pre {
    margin-top: calc(3em/9);
}
.popframe-body.local-page > blockquote:last-child,
.popframe-body.local-page > .table-wrapper:last-child,
.popframe-body.local-page > div.sourceCode:last-child pre {
    margin-bottom: calc(1em/9);
}

.popframe-body > hr:first-child {
    display: none;
}

.popframe-body #footnotes > hr:first-child,
.popframe-body #footnotes > hr:first-child + a.section-self-link {
    display: none;
}

.popframe-body #footnotes li > blockquote:nth-last-child(2),
.popframe-body #footnotes li > pre:nth-last-child(2),
.popframe-body #footnotes li > .sourceCode:nth-last-child(2) {
    margin-bottom: 2em;
}

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

/*  Drop caps in pop-frames.
    */
.popframe-body .drop-cap-goudy > p,
.popframe-body .drop-cap-yinit > p,
.popframe-body .drop-cap-de-zs > p,
.popframe-body .drop-cap-cheshire > p,
.popframe-body .drop-cap-kanzlei > p {
    text-indent: 0;
}
.popframe-body .drop-cap-goudy > p::first-letter {
    font-size: 6.5em;
}
.popframe-body .drop-cap-yinit > p::first-letter {
    font-size: 5.125em;
}
.popframe-body .drop-cap-de-zs > p::first-letter {
    font-size: 6.375em;
}
.popframe-body .drop-cap-cheshire > p::first-letter {
    font-size: 6.375em;
}
.popframe-body .drop-cap-kanzlei > p::first-letter {
    font-size: 6.625em;
}

.popframe-body > [class^='drop-cap-']:last-child {
    overflow: hidden;
}

/*  Margin notes in pop-frames.
    */
.popframe-body .marginnote {
    display: initial;
}

/*=-----------------=*/
/*= POP-FRAME TYPES =*/
/*=-----------------=*/

/*┌──────────────────────┐*/
/*│ Aux-link pop-frames. │*/
/*└──────────────────────┘*/

.popframe-body ul.aux-links-list {
    margin: 0.75em 0 0.5em 0;
    padding: 0 0 0 1.75em;
}

/*┌────────────────────────┐*/
/*│ Annotation pop-frames. │*/
/*└────────────────────────┘*/

.popframe-body > .annotation:only-child > p.data-field.title:only-of-type {
    font-size: 1.125em;
    line-height: 1.35;
    margin-bottom: 0.375em;
}

.popframe-body > div.annotation > div.annotation-abstract > :not(section).collapse:not(.expanded),
.popframe-body > div.annotation > div.annotation-abstract > :not(section).collapse.expanded {
    margin-left: 0;
    margin-right: -2px;
    padding-right: 0.5em;
    border-left: 1px solid var(--GW-TOC-border-color);
    border-right: 1px solid var(--GW-TOC-border-color);
}
.popframe-body > div.annotation > div.annotation-abstract > :not(section).collapse:last-child {
    margin-bottom: 0.25em;
    border-bottom: 1px solid var(--GW-TOC-border-color);
}

/*┌──────────────────────┐*/
/*│ Footnote pop-frames. │*/
/*└──────────────────────┘*/

.popframe-body.footnote > blockquote:last-child {
    margin-bottom: calc(1em/9);
}

/*┌──────────────────────────────┐*/
/*│ Citation context pop-frames. │*/
/*└──────────────────────────────┘*/

/*┌──────────────────┐*/
/*│ Code pop-frames. │*/
/*└──────────────────┘*/

.popframe.local-code-file .popframe-content-view {
    padding: 0;
}

.popframe-body.local-code-file div.sourceCode {
    height: 100%;
}
.popframe-body.local-code-file div.sourceCode.truncated {
    height: calc(100% - 1.75em);
}
.popframe-body.local-code-file div.sourceCode.truncated + p {
    font-family: var(--GW-sans-serif-font-stack);
    height: 1.75em;
    text-align: center;
}
.popframe-body.local-code-file pre {
    height: 100%;
    margin: 0;
    border: none;
    max-height: unset;
}

/*  “Loading failed” message.
    */
.popframe.local-code-file.loading-failed::after {
    content: "File not found.";
}

/*  “Raw code” pop-frames.
    */
.popframe-body.local-code-file pre.raw-code {
    white-space: pre-wrap;
}
.popframe-body.local-code-file pre.raw-code code {
    word-break: break-word;
    padding-left: 2px;
    padding-right: 2px;
}
.popframe-body.local-code-file pre.raw-code .line {
    counter-increment: code-line;
    display: inline-block;
    width: 100%;
    position: relative;
    padding: 0 0 0.25em 4em;
    box-sizing: border-box;
}
.popframe-body.local-code-file pre.raw-code .line:hover {
    background-color: var(--GW-raw-code-popframe-line-highlight-background-color);
    box-shadow:
    0  1px 0 0 var(--GW-raw-code-popframe-line-hightlight-border-color),
    0 -1px 0 0 var(--GW-raw-code-popframe-line-hightlight-border-color);
}
.popframe-body.local-code-file pre.raw-code .line::before {
    content: counter(code-line);
    position: absolute;
    width: 3.5em;
    height: 100%;
    left: 0;
    top: 0;
    text-align: right;
    color: var(--GW-raw-code-popframe-line-number-color);
    font-size: 0.8em;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0.25em 0.5em 0 0;
    border-right: 1px solid var(--GW-raw-code-popframe-line-number-divider-color);
}

/*┌────────────────────┐*/
/*│ Object pop-frames. │*/
/*└────────────────────┘*/
/*  “Object pop-frames”: videos, images, PDFs, archived web pages, etc.
    */

.popframe.object .popframe-content-view {
    padding: 0;
    background-color: var(--GW-popups-object-popup-background-color);
}

.popframe-body.object img,
.popframe-body.object video,
.popframe-body.object iframe,
.popframe-body.object object {
    display: block;
}

/*┌───────────────────┐*/
/*│ Image pop-frames. │*/
/*└───────────────────┘*/

/*  “Loading failed” message.
    */
.popframe.image.loading-failed::after {
    content: "Image not found.";
}

/*┌───────────────────┐*/
/*│ Video pop-frames. │*/
/*└───────────────────┘*/

/*  “Loading failed” message.
    */
.popframe.video.loading-failed::after {
    content: "Video not found.";
}

/*┌───────────────────┐*/
/*│ Audio pop-frames. │*/
/*└───────────────────┘*/

/*  “Loading failed” message.
    */
.popframe.video.loading-failed::after {
    content: "Audio file not found.";
}

/*┌────────────────────────────┐*/
/*│ Local document pop-frames. │*/
/*└────────────────────────────┘*/

/*  “Loading failed” message.
    */
.popframe.local-document.loading-failed::after {
    content: "File not found.";
}

/*┌──────────────────────────────┐*/
/*│ Local transclude pop-frames. │*/
/*└──────────────────────────────┘*/

.popframe.local-page .popframe-content-view {
    overflow-x: hidden;
}

.popframe-body > section:only-child > h1,
.popframe-body > section:only-child > h2,
.popframe-body > section:only-child > h3,
.popframe-body > section:only-child > h4,
.popframe-body > section:only-child > h5,
.popframe-body > section:only-child > h6 {
    margin-top: 0;
}

.popframe-body #page-metadata {
    margin: 0;
    overflow: visible;
}
.popframe-body #page-metadata::after {
    content: "";
    display: block;
    border-bottom: 1px dotted currentColor;
    width: calc(100% + 2em);
    margin: 1em -1em 1.125em -1em;
}

/*┌─────────────────┐*/
/*│ Tag pop-frames. │*/
/*└─────────────────┘*/
/*  On tag/directory index pop-frames, we want to hide the initial ‘# Links’
    <h1> because it takes up way too much space and adds nothing.
 */
.popframe-body h1.display-pop-not {
    display: none;
}
.popframe-body section.display-pop-not {
    margin-top: 2.75em;
}

/*  We also want to squeeze the directory list because the default
    unordered-list padding of 2em bottom uses up too much of a pop-frame.
 */
.popframe-body #directory-indexes ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/**********/
/* POPUPS */
/**********/

/*=----------------------=*/
/*= GENERAL POPUP STYLES =*/
/*=----------------------=*/

/*  Overlay that holds all popups as immediate children.
    */
.popup-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
}
.popup-container > * {
    pointer-events: auto;
}

/*  The three nested boxes that make up a popup:
    1. Outer frame (positioned within the popup container)
    2. Scroll view
    3. Content view

    The content view contains the actual contents of a popup.
    */
.popup,
.popup .popframe-scroll-view,
.popup .popframe-content-view,
.popup .popframe-title-bar,
.popup .popframe-footer-bar {
    box-sizing: border-box;
}

/*┌────────────────────┐*/
/*│ Popup outer frame. │*/
/*└────────────────────┘*/

.popup {
    /*  Layout. */
    position: absolute;
    overflow: visible;
    max-width: var(--GW-popups-popup-max-width);
    max-height: 100vh;
    z-index: 1;

    /*  Styling. */
    border: var(--GW-popups-popup-border-width) double var(--GW-popups-popup-border-color);
    box-shadow: 1px 2px 8px 0 var(--GW-popups-box-shadow-color);
    background-color: var(--GW-popups-popup-background-color);
}

/*┌──────────────────┐*/
/*│ Popup title bar. │*/
/*└──────────────────┘*/

.popup.has-title-bar {
    min-width: var(--GW-popups-popup-with-title-bar-min-width);
}

.popup .popframe-title-bar {
    position: absolute;
    height: var(--popup-title-bar-height);
    border-bottom: 1px solid var(--GW-popups-popup-border-color);
    background-color: var(--GW-popups-popup-title-bar-background-color);
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 100%;
    cursor: grab;
    z-index: 111;
}

.popup.has-title-bar.mini-title-bar .popframe-title-bar {
    overflow: hidden;
}
.popup.grabbed .popframe-title-bar,
.popup.dragging .popframe-title-bar,
.popup.dragging .popframe-title-bar a {
    cursor: grabbing;
}

.popup {
    --popup-title-bar-height: 0px;
}
.popup.has-title-bar {
    --popup-title-bar-height: var(--GW-popups-popup-title-bar-height);
    --popup-title-bar-button-size: var(--popup-title-bar-height) - 1px;
}
.popup.has-title-bar.mini-title-bar {
    --popup-title-bar-height: var(--GW-popups-popup-mini-title-bar-height);
}

/*  Popup title.
    */
.popup .popframe-title {
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.8rem;
    font-weight: bold;
    flex: 1 1 100%;
    /*  Extra 3rem padding on left to accommodate 2 extra buttons. */
    padding: 0 4rem 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    text-align: center;
}
.popup.mini-title-bar .popframe-title {
    visibility: hidden;
    padding: 0;
    flex: 0 1 100%;
    line-height: 0;
}
.popup .popframe-title,
.popup .popframe-title span,
.popup .popframe-title a {
    color: var(--GW-popups-popup-title-color);
}
.popup .popframe-title a:hover {
    color: var(--GW-popups-popup-title-link-hover-color);
}
.popup .popframe-title::after {
    display: none;
}

/*  Buttons in the popup title bar.
    */
.popup .popframe-title-bar-button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: 0;
    margin: 0 1px 0 0;
    padding: 4px;
    height: 100%;
    flex: 0 0 1.5rem;
    width: var(--popup-title-bar-button-size);
    cursor: pointer;
    color: var(--GW-popups-popup-title-bar-button-color);
}
.popup.mini-title-bar .popframe-title-bar-button {
    padding: 2px;
    flex: 0 0 1rem;
}
.popup .popframe-title-bar-button:hover {
    color: var(--GW-popups-popup-title-bar-button-color-hover);
}
.popup .popframe-title-bar-button:active {
    transform: scale(0.9);
}
.popup .popframe-title-bar-button svg {
    max-width: 100%;
    max-height: 100%;
}

.popup .popframe-title-bar-button:disabled {
    pointer-events: none;
    opacity: 0.35;
}

.popup.mini-title-bar button.zoom-button,
.popup.mini-title-bar button.options-button {
    display: none;
}

/*  Submenus of buttons in the popup title bar.
    */

.popup .popframe-title-bar .submenu {
    position: absolute;
    top: var(--popup-title-bar-height);
    background-color: var(--GW-popups-popup-title-bar-background-color);
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 1px;
    padding: 0 1px 1px 1px;
    background-color: var(--GW-popups-popup-border-color);
    visibility: hidden;
    box-shadow:
        1px 1px 0 0 var(--GW-popups-popup-title-bar-submenu-box-shadow-color);
    opacity: 0.0;
    transition:
        visibility 0.1s ease 0.2s,
        opacity 0.1s ease 0.2s;
}
.popup .popframe-title-bar .zoom-button + .submenu {
    left: -1px;
}
.popup .popframe-title-bar .submenu:hover,
.popup .popframe-title-bar .has-submenu:hover + .submenu {
    visibility: visible;
    opacity: 1.0;
}
.popup .popframe-title-bar .submenu button {
    background-color: var(--GW-popups-popup-title-bar-background-color);
    border: none;
    margin: 0;
}
.popup .popframe-title-bar .submenu button svg {
    height: calc(var(--popup-title-bar-button-size) - 8px);
    width: calc(var(--popup-title-bar-button-size) - 8px);
}

/*┌────────────────────┐*/
/*│ Popup scroll view. │*/
/*└────────────────────┘*/

.popup .popframe-scroll-view {
    overflow-y: auto;
    overscroll-behavior: none;
    max-height: calc(var(--GW-popups-popup-max-height) - 2 * var(--GW-popups-popup-border-width) - var(--popup-title-bar-height));
    height: 100%;
    margin-top: var(--popup-title-bar-height);
}

/*  Scroll bar styles (for WebKit/Blink).
    */
.popup .popframe-scroll-view::-webkit-scrollbar {
    width: 14px;
}
.popup .popframe-scroll-view::-webkit-scrollbar-thumb {
    background-color: var(--GW-popups-popup-scrollbar-thumb-color);
    box-shadow:
        0 0 0 3px var(--GW-popups-popup-scrollbar-track-color) inset;
}
.popup .popframe-scroll-view::-webkit-scrollbar-thumb:hover {
    background-color: var(--GW-popups-popup-scrollbar-thumb-hover-color);
}

/*  Scroll bar styles (for Firefox).
    */
.popup .popframe-scroll-view {
    scrollbar-color: var(--GW-popups-popup-scrollbar-thumb-color) var(--GW-popups-popup-scrollbar-track-color);
}
.popup .popframe-scroll-view:hover {
    scrollbar-color: var(--GW-popups-popup-scrollbar-thumb-hover-color) var(--GW-popups-popup-scrollbar-track-color);
}

/*┌─────────────────────┐*/
/*│ Popup content view. │*/
/*└─────────────────────┘*/

.popup .popframe-content-view {
    --GW-base-font-size: 0.9rem;

    background-color: var(--GW-popups-popup-background-color);
    padding: 0.7em 0.9em 0.8em 0.9em;
    overflow: auto;
}

/*┌─────────────┐*/
/*│ Popup body. │*/
/*└─────────────┘*/

.popup-body {
    font-size: 0.9em;
    line-height: 1.50;
}

/*┌─────────────────┐*/
/*│ Focused popups. │*/
/*└─────────────────┘*/

.popup:not(.focused) .popframe-title-bar * {
    pointer-events: none;
}

.popup.focused {
    --GW-popups-popup-border-color: var(--GW-popups-popup-border-focused-color);
    --GW-popups-box-shadow-color: var(--GW-popups-box-shadow-focused-color);

    --GW-popups-popup-title-bar-background-color: var(--GW-popups-popup-title-bar-background-focused-color);
    --GW-popups-popup-title-bar-button-color: var(--GW-popups-popup-title-bar-button-focused-color);
    --GW-popups-popup-title-bar-button-color-hover: var(--GW-popups-popup-title-bar-button-focused-color-hover);
    --GW-popups-popup-title-color: var(--GW-popups-popup-title-focused-color);
    --GW-popups-popup-title-link-hover-color: var(--GW-popups-popup-title-link-hover-focused-color);

    --GW-popups-popup-scrollbar-thumb-color: var(--GW-popups-popup-scrollbar-thumb-focused-color);
    --GW-popups-popup-scrollbar-thumb-hover-color: var(--GW-popups-popup-scrollbar-thumb-hover-focused-color);
}

/*┌──────────────────────────┐*/
/*│ Zoomed / resized popups. │*/
/*└──────────────────────────┘*/

.popup.zoomed .popframe-content-view,
.popup.resized .popframe-content-view {
    max-width: 970px;
    margin: auto;
}

.popup.zoomed.full .popframe-content-view {
    font-size: 1em;
    line-height: 1.60;
}

.popup.object.zoomed .popframe-content-view,
.popup.object.resized .popframe-content-view,
.popup.local-code-file.zoomed .popframe-content-view,
.popup.local-code-file.resized .popframe-content-view {
    max-width: unset;
    height: 100%;
}

.popup.object.zoomed iframe,
.popup.object.zoomed object ,
.popup.object.resized iframe,
.popup.object.resized object {
    width: 100%;
    height: 100%;
}

/*┌───────────────────┐*/
/*│ Collapsed popups. │*/
/*└───────────────────┘*/

.popup.collapsed[class] {
    height: unset;
    min-height: unset;
}
.popup.collapsed .popframe-title-bar {
    border-bottom: none;
    height: calc(var(--popup-title-bar-height) - 1px);
}
.popup.collapsed .popframe-scroll-view {
    height: 0;
    margin-top: calc(var(--popup-title-bar-height) - 1px);
}

/*┌───────────────────────────┐*/
/*│ Transitional UI elements. │*/
/*└───────────────────────────┘*/

/*  Animated spawn/despawn.
 */
.popup {
    opacity: 1.0;
    transition: none;
}
.popup.fading {
    opacity: 0.0;
    transition:
        opacity 0.25s ease-in 0.1s;
}

/*  Spinners.
 */
.popup.loading::before,
.popup.rendering::before {
    position: absolute;
    width: 3em;
    height: 3em;
    max-height: calc(6em - var(--popup-title-bar-height) - 1px);
    top: var(--popup-title-bar-height);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-indent: 0;
    display: block;
    overflow: hidden;
    opacity: 0.2;
    z-index: 1;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*  Loading spinner (for object popups).
 */
.popup.loading::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M288 24.103v8.169a11.995 11.995 0 0 0 9.698 11.768C396.638 63.425 472 150.461 472 256c0 118.663-96.055 216-216 216-118.663 0-216-96.055-216-216 0-104.534 74.546-192.509 174.297-211.978A11.993 11.993 0 0 0 224 32.253v-8.147c0-7.523-6.845-13.193-14.237-11.798C94.472 34.048 7.364 135.575 8.004 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.789 504 256c0-121.187-86.924-222.067-201.824-243.704C294.807 10.908 288 16.604 288 24.103z"/></svg>');
    animation: fa-spin 2s infinite linear;
}

.popup.image.loading img,
.popup.image.loading-failed img,
.popup.object.loading-failed iframe {
    visibility: hidden;
}

/*  Rendering spinner.
 */
.popup.rendering::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.115 373.846l-6.941-4.008c-5.546-3.202-7.564-10.177-4.661-15.886 32.971-64.838 31.167-142.731-5.415-205.954-36.504-63.356-103.118-103.876-175.8-107.701C260.952 39.963 256 34.676 256 28.321v-8.012c0-6.904 5.808-12.337 12.703-11.982 83.552 4.306 160.157 50.861 202.106 123.67 42.069 72.703 44.083 162.322 6.034 236.838-3.14 6.149-10.75 8.462-16.728 5.011z"/></svg>');
    animation: fa-spin 3s infinite linear;
}

/*  “Loading failed” messages (for object popups).
    */
.popup.loading-failed::after {
    content: "Loading failed.";
    position: absolute;
    left: 0;
    top: var(--popup-title-bar-height);
    width: 100%;
    height: calc(100% - var(--popup-title-bar-height) - 1px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-family: var(--GW-sans-serif-font-stack);
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.35;
}

/*=-------------=*/
/*= POPUP TYPES =*/
/*=-------------=*/

/*┌────────────────────┐*/
/*│ Annotation popups. │*/
/*└────────────────────┘*/

.popup.annotation {
    min-width: var(--GW-popups-annotation-popup-min-width);
    min-height: var(--GW-popups-annotation-popup-min-height);
}

/*┌──────────────────┐*/
/*│ Footnote popups. │*/
/*└──────────────────┘*/

/*┌──────────────────────────┐*/
/*│ Citation context popups. │*/
/*└──────────────────────────┘*/

/*┌──────────────────┐*/
/*│ Aux-link popups. │*/
/*└──────────────────┘*/

.popup.aux-links {
    min-width: var(--GW-popups-aux-links-popup-min-width);
    min-height: var(--GW-popups-aux-links-popup-min-height);
}

/*┌──────────────┐*/
/*│ Code popups. │*/
/*└──────────────┘*/

.popup.local-code-file {
    width: var(--GW-popups-popup-max-width);
    height: var(--GW-popups-popup-max-height);
}

.popframe.local-code-file .popframe-content-view {
    height: 100%;
}

/*┌────────────────┐*/
/*│ Object popups. │*/
/*└────────────────┘*/

.popup.object {
    width: var(--GW-popups-popup-max-width);
    height: var(--GW-popups-popup-max-height);
}

.popup-body.object iframe,
.popup-body.object object {
    width: calc(var(--GW-popups-popup-max-width) - 2 * var(--GW-popups-popup-border-width));
    height: calc(var(--GW-popups-popup-max-height) - 2 * var(--GW-popups-popup-border-width) - var(--popup-title-bar-height));
}

/*┌───────────────┐*/
/*│ Image popups. │*/
/*└───────────────┘*/

.popup.image {
    width: unset;
    min-width: var(--GW-popups-image-popup-min-size);
    height: unset;
    min-height: var(--GW-popups-image-popup-min-size);
}

.popup-body.image img {
    margin: auto;
    max-width: calc(var(--GW-popups-popup-max-width) - 2 * var(--GW-popups-popup-border-width));
    max-height: calc(var(--GW-popups-popup-max-height) - 2 * var(--GW-popups-popup-border-width) - var(--popup-title-bar-height));
    object-fit: contain;
    background-color: var(--GW-popups-popup-border-color);
}
.popup-body.image img.invert,
.popup-body.image img.invert-auto {
    background-color: var(--GW-body-background-color);
}

/*  Loading spinner.
    */
.popup.image.loading::before {
    height: 2em;
    width: 2em;
}

/*  “Loading failed” message.
    */
.popup.image:not(.dimensions-specified).loading-failed::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>');
    box-sizing: border-box;
    padding: 8px;
    width: calc(var(--GW-popups-image-popup-min-size) - 2 * var(--GW-popups-popup-border-width));
    height: calc(var(--GW-popups-image-popup-min-size) - 2 * var(--GW-popups-popup-border-width));
    opacity: 0.2;
    margin: auto;
}

/*┌───────────────┐*/
/*│ Video popups. │*/
/*└───────────────┘*/

/*  Popups for videos.
    */
.popup.video {
    width: unset;
    height: unset;
}
.popup-body.video iframe {
    width: var(--GW-popups-video-iframe-width);
    height: var(--GW-popups-video-iframe-height);
}

/*┌───────────────┐*/
/*│ Audio popups. │*/
/*└───────────────┘*/

/*┌────────────────────────┐*/
/*│ Local document popups. │*/
/*└────────────────────────┘*/

/*┌──────────────────────────┐*/
/*│ Local transclude popups. │*/
/*└──────────────────────────┘*/

.popup.local-page {
    min-width: var(--GW-popups-local-page-popup-min-width);
    min-height: var(--GW-popups-local-page-popup-min-height);
}

/*  Table of contents popups.
    */
.popup.local-page.toc-section .popframe-scroll-view {
    max-height: calc(100vh - 2 * var(--GW-popups-popup-border-width) - var(--popup-title-bar-height));
}

/*  External page embeds popups.
    */
.popup.full-page {
    width: var(--GW-popups-popup-max-width);
    height: var(--GW-popups-popup-max-height);
}

/*=---------------=*/
/*= POPUP CONTENT =*/
/*=---------------=*/
/*  Adjustments for styles in popups.
    */

/*  Page thumbnails in local page transclude popups.
 */
.popup-body .abstract figure {
    float: right;
    max-width: calc(50% - 1em);
    margin: 0.5em 0 1em 1em;
}

/*=-----------------------=*/
/*= POPUPS OPTIONS DIALOG =*/
/*=-----------------------=*/

#popup-options-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--GW-popups-popup-options-dialog-backdrop-background-color);
    z-index: 2;
    opacity: 1;
    transition:
        opacity 0.15s ease;
}
#popup-options-dialog.fading {
    opacity: 0;
}

#popup-options-dialog > div {
    position: absolute;
    width: 500px;
    background-color: var(--GW-popups-popup-options-dialog-background-color);
    border: 1px solid var(--GW-popups-popup-options-dialog-border-color);
    box-shadow: 0 2px 2px 0 var(--GW-popups-popup-options-dialog-box-shadow-color);
    font-family: var(--GW-sans-serif-font-stack);
    user-select: none;
}

#popup-options-dialog .popup-options-dialog-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    border-bottom: 1px solid var(--GW-popups-popup-options-dialog-horizontal-rule-color);
}

#popup-options-dialog h1 {
    margin: 0 0 0 0.75em;
    text-align: center;
    font-feature-settings: unset;
    font-size: 1.5em;
}

#popup-options-dialog button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: inherit;
    font-family: inherit;
    font-size: inherit;
}

#popup-options-dialog button.save-button {
    background-color: var(--GW-popups-popup-options-dialog-button-background-color);
    padding: 0 0.75em;
    height: 2em;
    line-height: 1;
    font-weight: 600;
    color: var(--GW-popups-popup-options-dialog-button-text-color);
    border: 1px solid var(--GW-popups-popup-options-dialog-button-border-color);
}
#popup-options-dialog button.save-button:hover {
    cursor: pointer;
    box-shadow:
        0 0 0 2px var(--GW-popups-popup-options-dialog-button-background-color) inset,
        0 0 0 3px var(--GW-popups-popup-options-dialog-button-hover-box-shadow-color) inset;
}
#popup-options-dialog button.save-button:active {
    box-shadow:
        0 0 0 4px var(--GW-popups-popup-options-dialog-button-background-color) inset,
        0 0 0 5px var(--GW-popups-popup-options-dialog-button-hover-box-shadow-color) inset;
}

#popup-options-dialog button.close-button {
    position: relative;
    width: 2em;
    height: 2em;
    color: var(--GW-popups-popup-options-dialog-button-text-color);
}
#popup-options-dialog button.close-button:hover {
    cursor: pointer;
    box-shadow: 1px 1px 0 0 currentColor;
}
#popup-options-dialog button.close-button:active {
    left: 1px;
    top: 1px;
    box-shadow:
        -1px -1px 0 0 currentColor;
}
#popup-options-dialog button.close-button svg {
    height: 100%;
    width: 100%;
    fill: currentColor;
}

#popup-options-dialog .option-buttons {
    padding: 0.5em 1.5em 0.75em 1.5em;
}
#popup-options-dialog .option-buttons label {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: flex-start;
    width: 100%;
}
#popup-options-dialog .option-buttons label .button-text {
    display: block;
    flex: 1 0 100%;
    padding: 0.5em 0.75em;
}
#popup-options-dialog .option-buttons label input:checked + .button-text .label {
    text-decoration: underline;
}
#popup-options-dialog .option-buttons label .explanation {
    display: block;
    font-weight: normal;
    font-size: 0.875rem;
    color: var(--GW-popups-popup-options-dialog-option-button-explanation-text-color);
}
#popup-options-dialog .option-buttons label:hover,
#popup-options-dialog .option-buttons label:hover input {
    cursor: pointer;
}
#popup-options-dialog .option-buttons label:hover {
    color: var(--GW-popups-popup-options-dialog-option-button-hover-text-color);
}
#popup-options-dialog .option-buttons label:hover .button-text .label {
    text-decoration: dotted underline;
}

#popup-options-dialog .option-buttons input {
    appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid var(--GW-popups-popup-options-dialog-radio-button-border-color);
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0.75em 0 0 0;
    flex: 1 0 auto;
    transition:
        box-shadow 0.15s ease;
}

#popup-options-dialog .option-buttons input:checked {
    box-shadow:
        0 0 0 3px var(--GW-popups-popup-options-dialog-button-background-color) inset,
        0 0 0 1em var(--GW-popups-popup-options-dialog-button-hover-box-shadow-color) inset;
}

/*  With popups disabled, the “show popup options dialog” icon/button.
    */
#popups-disabled-show-popup-options-dialog-button {
    position: fixed;
    top: calc(0.55em + 3px);
    right: 12em;
    z-index: 1;
    opacity: 0.3;
    visibility: visible;
    transition:
        opacity 2s ease;
}
@media only screen and (max-width: 1760px) {
    #popups-disabled-show-popup-options-dialog-button {
        top: 15em;
        right: 0.6em;
    }
}
#popups-disabled-show-popup-options-dialog-button.hidden {
    opacity: 0;
}
#popups-disabled-show-popup-options-dialog-button:hover {
    opacity: 1.0;
    transition: none;
}
#popups-disabled-show-popup-options-dialog-button button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    background: inherit;
    color: var(--GW-popups-show-popup-options-dialog-button-color);
    fill: currentColor;
    padding: 0;
    line-height: 1;
    display: block;
    width: 1.125em;
}
#popups-disabled-show-popup-options-dialog-button button:hover {
    cursor: pointer;
    opacity: 1.0;
}
#popups-disabled-show-popup-options-dialog-button button:active {
    transform: scale(0.95);
}

/**********/
/* POPINS */
/**********/

/*  The three nested boxes that make up a popin:
    1. Outer frame (positioned within the block flow, after the spawning target)
    2. Scroll view
    3. Content view

    The content view contains the actual contents of a popin.
    */
.popin,
.popin .popframe-scroll-view,
.popin .popframe-content-view,
.popin .popframe-title-bar {
    box-sizing: border-box;
}

/*┌────────────────────┐*/
/*│ Popin outer frame. │*/
/*└────────────────────┘*/

.popin {
    /*  Layout. */
    display: block;
    position: relative;
    width: 100%;
    max-height: var(--GW-popins-popin-max-height);
    min-height: var(--GW-popins-popin-min-height);
    overflow: visible;
    z-index: 11;

    margin: 1em 0;

    /*  Styling. */
    border: var(--GW-popins-popin-border-width) double var(--GW-popins-popin-border-color);
    filter: drop-shadow(1px 2px 4px var(--GW-popins-box-shadow-color));
    background-color: var(--GW-popins-popin-background-color);
}

.popin + .popin {
    display: none;
}

/*┌──────────────────┐*/
/*│ Popin title bar. │*/
/*└──────────────────┘*/

.popin .popframe-title-bar {
    position: absolute;
    right: calc(-1 * var(--GW-popins-popin-border-width));
    bottom: calc(100%);
    height: calc(var(--GW-popins-popin-border-width) + var(--GW-popins-popin-title-bar-height));
    max-width: calc(100% + (2 * var(--GW-popins-popin-border-width)) - 2em);
    border-style: double;
    border-color: var(--GW-popins-popin-border-color);
    border-width: var(--GW-popins-popin-border-width) var(--GW-popins-popin-border-width) 0 var(--GW-popins-popin-border-width);
    background-color: var(--GW-popins-popin-title-bar-background-color);
    --GW-link-underline-background-color: var(--GW-popins-popin-title-bar-background-color);
    display: flex;
    flex-flow: row;
    align-items: center;
    width: -moz-fit-content;
    z-index: 1;
}

.popin {
    --popin-title-bar-height: 0px;
}
.popin.has-title-bar {
    --popin-title-bar-height: var(--GW-popins-popin-title-bar-height);
}

/*  Popin title.
    */
.popin .popframe-title {
    display: flex;
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.875rem;
    flex: 1 1 100%;
    padding: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    text-indent: 0;
}
.popin .popframe-title::after {
    display: none;
}

.popin .popframe-title-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  Buttons in the popin title bar.
    */
.popin .popframe-title-bar-button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    margin: 0 1px;
    padding: 4px;
    height: 100%;
    flex: 1 0 auto;
    width: calc(var(--GW-popins-popin-title-bar-height) - 1px);
    cursor: pointer;
    color: var(--GW-popins-popin-title-bar-button-color);
}
.popin .popframe-title-bar-button:active {
    transform: scale(0.9);
}
.popin .popframe-title-bar-button svg {
    max-width: 100%;
    max-height: 100%;
    width: 24px;
    height: 24px;
}

.popin .popframe-title-bar-button:disabled {
    pointer-events: none;
    opacity: 0.35;
}

/*  Popin stack counter.
    */
.popin-stack-counter {
    position: absolute;
    right: calc(100% + var(--GW-popins-popin-border-width));
    bottom: var(--GW-popins-popin-border-width);
    height: calc(var(--GW-popins-popin-title-bar-height) - var(--GW-popins-popin-border-width) - 3px);
    padding: 0 0.5em;
    background-color: var(--GW-popins-popin-border-color);
    border-style: solid;
    border-color: var(--GW-popins-popin-border-color);
    border-width: 1px 0 0 1px;
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.8rem;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 0;
    cursor: default;
    color: var(--GW-popins-popin-stack-counter-text-color);
}

/*┌───────────────────┐*/
/*│ Popin footer bar. │*/
/*└───────────────────┘*/

.popin.has-footer-bar {
    margin-bottom: calc(1em + var(--GW-popins-popin-border-width) + var(--GW-popins-popin-footer-bar-height));
}

.popin .popin-footer-bar {
    position: absolute;
    left: calc(-1 * var(--GW-popins-popin-border-width));
    right: calc(-1 * var(--GW-popins-popin-border-width));
    top: calc(100%);
    height: calc(var(--GW-popins-popin-border-width) + var(--GW-popins-popin-footer-bar-height));
    max-width: calc(100% + (2 * var(--GW-popins-popin-border-width)));
    border-style: double;
    border-color: var(--GW-popins-popin-border-color);
    border-width: 1px var(--GW-popins-popin-border-width) var(--GW-popins-popin-border-width) var(--GW-popins-popin-border-width);
    background-color: var(--GW-popins-popin-title-bar-background-color);
    --GW-link-underline-background-color: var(--GW-popins-popin-title-bar-background-color);
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.popin .popin-footer-bar .popframe-title-link {
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.875rem;
    text-indent: 0;
}

/*┌────────────────────┐*/
/*│ Popin scroll view. │*/
/*└────────────────────┘*/

.popin .popframe-scroll-view {
    overflow-y: auto;
    overscroll-behavior: none;
    max-height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
    height: 100%;
}

/*  Scroll bar styles (for WebKit/Blink).
    */
.popin .popframe-scroll-view::-webkit-scrollbar {
    width: 10px;
}
.popin .popframe-scroll-view::-webkit-scrollbar-thumb {
    background-color: var(--GW-popins-popin-scrollbar-thumb-color);
    box-shadow:
        0 0 0 3px var(--GW-popins-popin-scrollbar-track-color) inset;
}
.popin .popframe-scroll-view::-webkit-scrollbar-thumb:hover {
    background-color: var(--GW-popins-popin-scrollbar-thumb-hover-color);
}

/*  Scroll bar styles (for Firefox).
    */
.popin .popframe-scroll-view {
    scrollbar-color: var(--GW-popins-popin-scrollbar-thumb-color) var(--GW-popins-popin-scrollbar-track-color);
}
.popin .popframe-scroll-view:hover {
    scrollbar-color: var(--GW-popins-popin-scrollbar-thumb-hover-color) var(--GW-popins-popin-scrollbar-track-color);
}

/*┌─────────────────────┐*/
/*│ Popin content view. │*/
/*└─────────────────────┘*/

.popin .popframe-content-view {
    background-color: var(--GW-popins-popin-background-color);
    --GW-link-underline-background-color: var(--GW-popins-popin-title-bar-background-color);
    padding: 0.7em 0.9em 0.8em 0.9em;
    overflow: auto;
}

/*┌─────────────┐*/
/*│ Popin body. │*/
/*└─────────────┘*/

.popin-body {
    font-size: 0.9em;
}

/*┌───────────────────────────┐*/
/*│ Transitional UI elements. │*/
/*└───────────────────────────┘*/

/*  Spinners.
 */
.popin.loading::before,
.popin.rendering::before {
    position: absolute;
    width: 3em;
    height: 3em;
    max-height: 6em;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-indent: 0;
    display: block;
    overflow: hidden;
    opacity: 0.2;
    z-index: 1;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*  Loading spinner (for object popins).
 */
.popin.loading::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M288 24.103v8.169a11.995 11.995 0 0 0 9.698 11.768C396.638 63.425 472 150.461 472 256c0 118.663-96.055 216-216 216-118.663 0-216-96.055-216-216 0-104.534 74.546-192.509 174.297-211.978A11.993 11.993 0 0 0 224 32.253v-8.147c0-7.523-6.845-13.193-14.237-11.798C94.472 34.048 7.364 135.575 8.004 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.789 504 256c0-121.187-86.924-222.067-201.824-243.704C294.807 10.908 288 16.604 288 24.103z"/></svg>');
    animation: fa-spin 2s infinite linear;
}

.popin-body.image.loading img,
.popin-body.image.loading-failed img,
.popin-body.object.loading-failed iframe {
    visibility: hidden;
}

/*  Rendering spinner.
 */
.popin.rendering::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.115 373.846l-6.941-4.008c-5.546-3.202-7.564-10.177-4.661-15.886 32.971-64.838 31.167-142.731-5.415-205.954-36.504-63.356-103.118-103.876-175.8-107.701C260.952 39.963 256 34.676 256 28.321v-8.012c0-6.904 5.808-12.337 12.703-11.982 83.552 4.306 160.157 50.861 202.106 123.67 42.069 72.703 44.083 162.322 6.034 236.838-3.14 6.149-10.75 8.462-16.728 5.011z"/></svg>');
    animation: fa-spin 3s infinite linear;
}

/*  “Loading failed” messages (for object popups).
 */
.popin.loading-failed::after {
    content: "Loading failed.";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-family: var(--GW-sans-serif-font-stack);
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.35;
}

/*┌───────────────────────────┐*/
/*│ Links with an open popin. │*/
/*└───────────────────────────┘*/

.popin-open:not(.footnote-ref),
.popin-open:not(.footnote-ref):hover {
    background-color: var(--GW-popins-popin-background-color);
    --GW-link-underline-background-color: var(--GW-popins-popin-background-color);
    --popin-open-highlight-box-shadow-x-offset: 2px;
    box-shadow:
        var(--popin-open-highlight-box-shadow-x-offset) 0 0 5px var(--GW-popins-popin-background-color);
    background-image: none !important;
    display: inline-block;
    position: relative;
    text-align: left;
    text-indent: 0;
}
.popin-open:not(.footnote-ref)::before,
.popin-open:not(.footnote-ref):hover::before {
    content: "";
    display: block;
    position: absolute;
    background-image: none;
    width: calc(100% + 2 * var(--GW-popins-popin-border-width));
    height: calc(100% + 2 * var(--GW-popins-popin-border-width));
    border: var(--GW-popins-popin-border-width) double var(--GW-popins-popin-border-color);
    left: calc(var(--popin-open-highlight-box-shadow-x-offset) - (2 * var(--GW-popins-popin-border-width)));
    bottom: calc(0px - (2 * var(--GW-popins-popin-border-width)));
    top: unset;
}
.popin-open:not(.footnote-ref) .indicator-hook {
    display: none;
}

/*=-------------=*/
/*= POPIN TYPES =*/
/*=-------------=*/

/*┌────────────────────┐*/
/*│ Annotation popins. │*/
/*└────────────────────┘*/

@media only screen and (max-width: 649px) {
    .popin-body figure:first-child {
        margin-top: 1.75em;
    }
    .popin-body.wikipedia-entry figure:first-child {
        margin-top: 1.5em;
    }
}

/*┌──────────────────┐*/
/*│ Footnote popins. │*/
/*└──────────────────┘*/

.popin.footnote {
    min-height: unset;
}

/*┌──────────────────────────┐*/
/*│ Citation context popins. │*/
/*└──────────────────────────┘*/

/*┌──────────────┐*/
/*│ Code popins. │*/
/*└──────────────┘*/

.popin.local-code-file .popframe-title-bar {
    background-color: var(--GW-pre-element-background-color);
}

/*┌────────────────┐*/
/*│ Object popins. │*/
/*└────────────────┘*/

.popin-body.object iframe,
.popin-body.object object {
    width: 100%;
    height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
}

/*┌───────────────┐*/
/*│ Image popins. │*/
/*└───────────────┘*/

.popin-body.image img {
    margin: auto;
    max-height: calc(var(--GW-popins-popin-max-height) - 2 * var(--GW-popins-popin-border-width) - var(--popin-title-bar-height));
}

/*┌───────────────┐*/
/*│ Video popins. │*/
/*└───────────────┘*/

.popin.video {
    padding: 0;
}

.popin-body.video iframe {
    display: block;
    width: 100%;
}

/*┌───────────────┐*/
/*│ Audio popins. │*/
/*└───────────────┘*/

/*┌────────────────────────┐*/
/*│ Local document popins. │*/
/*└────────────────────────┘*/

/*┌──────────────────────────┐*/
/*│ Local transclude popins. │*/
/*└──────────────────────────┘*/

.popin-body #page-metadata::after {
    width: calc(100% + 1em);
    margin: 1em -1em 1.125em 0;
}

/*=---------------=*/
/*= POPIN CONTENT =*/
/*=---------------=*/
/*  Adjustments for styles in popins.
    */

/*┌──────────────┐*/
/*│ Style reset. │*/
/*└──────────────┘*/

.popin {
    white-space: normal;
    font-weight: normal;
    font-style: normal;
    font-size: var(--GW-body-text-font-size);
    text-align: unset;
}


/***************/
/* ANNOTATIONS */
/***************/

section.highlighted {
    position: relative;
}
section.highlighted::before {
    content: "";
    display: block;
    position: absolute;
    top: -0.5em;
    left: -1.25em;
    width: calc(100% + 2em);
    height: calc(100% + 1.25em);
    outline: 3px double var(--GW-section-highlighted-border-color);
    z-index: -1;
    transition:
        outline 0.15s ease 0.05s;
}
section.highlight-fading::before {
    outline: 3px double transparent;
}

/*  Data fields.
    */
.annotation .data-field,
.annotation-partial .data-field {
    text-align: left;
    text-indent: 0;
}
.annotation .data-field + .data-field,
.annotation-partial .data-field + .data-field {
    margin-top: 0.25em;
}

.annotation .data-field.title .title-link,
.annotation-partial .data-field.title .title-link {
    font-weight: bold;
}
.annotation .data-field.title + p {
    text-indent: 0;
}

.annotation .originalURL,
.annotation-partial .originalURL {
    font-variant-caps: small-caps;
    margin-left: 0.25em;
}
.annotation div.data-field.annotation-abstract {
    margin-top: 0.5em;
}
.annotation blockquote.data-field.annotation-abstract {
    margin-top: 1em;
}
.annotation .data-field.annotation-abstract:empty {
    display: none;
}
.annotation .data-field.annotation-abstract:not(blockquote) > .page-description-annotation::before {
    content: "";
    display: block;
    overflow: auto;
    margin: 0.75em 0 0.5em 0;
    border-top: 1px dotted currentColor;
}

/*  Images (such as the ones in Wikipedia annotations).
    */
@media all and (min-width: 650px) {
    .annotation > figure.float-right {
        margin: 0.125em 0 0.125em 1.5em;
        max-width: calc(50% - 1.5em);
        float: right;
    }
}
.annotation figure {
    clear: both;
}
.annotation figure.float-left .image-wrapper,
.annotation figure.float-right .image-wrapper {
    max-width: 100%;
}

.annotation .image-row-wrapper {
    display: flex;
}

.annotation .page-description-annotation {
    font-style: italic;
    margin-bottom: 0.5em;
}

/*  Wikipedia entries.
 */
.annotation.wikipedia-entry .table-wrapper {
    margin: 1.5em 0 1.5em 0;
    clear: both;
}
.annotation.wikipedia-entry .infobox {
    font-size: 0.9em;
}
.annotation.wikipedia-entry .infobox table {
    font-size: 0.935em;
}
.annotation.wikipedia-entry .infobox tbody tr:hover {
    outline: none;
}
.annotation.wikipedia-entry .infobox th[colspan="2"],
.annotation.wikipedia-entry .infobox td[colspan="2"],
.annotation.wikipedia-entry .infobox th.sidebar-title,
.annotation.wikipedia-entry .infobox th.sidebar-heading {
    text-align: center;
}
.annotation.wikipedia-entry .infobox th {
    border-top: 1px solid var(--GW-table-row-horizontal-border-color);
}
.annotation.wikipedia-entry .infobox tr:first-of-type th {
    font-size: 1.25em;
}
.annotation.wikipedia-entry .infobox td:first-child {
    font-weight: bold;
}
.annotation.wikipedia-entry .infobox td ul {
    margin: 0.25em 0;
    padding: 0 0 0 1.5em;
}
.annotation.wikipedia-entry > figure.float-right {
    margin: 0.125em 0 0.75em 1.5em;
}
.annotation.wikipedia-entry #Timeline-row {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0.25em auto;
}
.annotation.wikipedia-entry th br ~ * {
    font-weight: normal;
    font-size: calc((1 / 1.25) * 1em);
}
.annotation.wikipedia-entry .hatnote {
    margin: 0 0 0.75em 0;
    font-style: italic;
}
.annotation.wikipedia-entry .chemf {
    word-break: break-all;
}
.annotation.wikipedia-entry .side-box {
    border: 1px dotted currentColor;
    float: right;
    padding: 0.5em 0.75em;
    max-width: calc(50% - 2em);
    margin: 0 0 1em 1em;
    overflow: auto;
    position: relative;
}
.annotation.wikipedia-entry .side-box.sister-box ul {
    padding: 0;
    margin: 1em 0 0 0;
}
.annotation.wikipedia-entry .side-box.sister-box ul li::before {
    content: none;
}
.annotation.wikipedia-entry .side-box.sister-box ul .sister-logo {
    margin: 0 0.5em 0 0;
    display: inline-block;
    vertical-align: text-top;
    width: 1.5em;
    text-align: center;
}

/*  Special case for inline math in Wikipedia pop-frames.
    */
.annotation.wikipedia-entry .mwe-math-element {
    display: inline-block;
    height: 1.25em;
    line-height: 1;
    margin: 0;
    vertical-align: bottom;
    padding: 0;
    text-indent: 0;
}
.annotation.wikipedia-entry .mwe-math-element img {
    display: inline-block;
    height: 100%;
}
/*  Ditto, but block math.
 */
.annotation.wikipedia-entry dl .mwe-math-element {
    display: block;
    height: unset;
}
.annotation.wikipedia-entry dl .mwe-math-element img {
    display: block;
}

/* WP wraps references entirely in <cite> elements; <cite> is styled by browsers (Chrome/FF) by default in italics. No one wants their entire reference in italics, so WP resets the font to the default style (whatever that is), and styles italics bits (like book titles) manually. We need to replicate that, or else references sections in our WP popups will be entirely italics! */
.annotation.wikipedia-entry cite,
.annotation.wikipedia-entry dfn {
    font-style: inherit;
}

/*  “Aux links” (backlinks, similars, “see also”, etc.) section of annotations.
 */

.aux-links-append {
    margin-top: 0.5em;
    padding-left: 2px;
    padding-bottom: 0.125em;
}
.aux-links-append + .aux-links-append {
    margin-top: 1em;
}

.TOC + .aux-links-container {
    margin-top: 1em;
}

.aux-links-append > .columns > ul {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

.aux-links-append > div > .columns:not(:first-child) {
    margin-top: 1em;
}

/*  “Aux links” in link bibliographies, directory indexes, and other transcluded
    (rather than pop-framed) annotations.
 */

.annotation .collapse.aux-links-container {
    clear: right;
    border-top: 1px solid var(--GW-TOC-border-color);
}
.annotation .collapse.aux-links-container:not(:last-child) {
    border-bottom: 1px solid var(--GW-TOC-border-color);
}
.annotation p + .collapse.aux-links-container {
    margin-top: 1.25em;
}
.annotation .collapse.aux-links-container + .collapse.aux-links-container {
    margin-top: 1.5em;
}
.annotation .TOC + .collapse.aux-links-container {
    margin-top: 0.75em;
}

.annotation .collapse.aux-links-container .aux-links-append {
    padding-left: 0;
}

.annotation :not(section).collapse.aux-links-container:not(.expanded) > .disclosure-button::before {
    content: "Click to expand";
    width: 10rem;
    padding: 1rem 3rem 0.75rem 0;
}
.annotation :not(section).collapse.aux-links-container:not(.expanded) > .disclosure-button::after {
    display: none;
}

ol.link-bibliography-list-compact {
    --GW-list-left-padding: 2.25em;

    list-style-type: lower-alpha;
}
ol.link-bibliography-list-compact > li::marker {
    font-family: var(--GW-monospaced-font-stack);
    font-size: 0.9em;
}
@media all and (max-width: 649px) {
    ol.link-bibliography-list-compact {
        padding-left: 1.75em;
    }
}

#link-bibliography > ol > li > p + p {
    text-indent: 0;
    margin-top: 0.5em;
}

/*********************/
/* BOTTOM DECORATION */
/*********************/
/* Mobile only.      */

@media only screen and (max-width: 649px) {
    #footer-logo {
        position: relative;
    }
    #footer-logo::after {
        content: "";
        background-color: var(--GW-body-background-color);
        background-image: url('/static/img/logo/logo-smooth.svg');
        display: block;
        position: relative;
        width: 22px;
        height: 30px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin: auto;
        padding: 0 10px 0 10px;
        z-index: 1;
    }
    #footer-logo::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 15px;
        height: 1px;
        border-bottom: 1px dotted var(--GW-index-page-bottom-ornament-line-color);
        width: 200%;
    }
}


/*********************/
/* SEQUENTIAL NAV UI */
/*********************/
/* Navigation bar for previous/next page links (horizontal divider based on: https://commons.wikimedia.org/wiki/File:Filet_arabesque.svg )
   On mobile, instead of the arabesque #navigation, we insert a G footer; see `dark-mode-adjustments.css`. */

@media only screen and (max-width: 649px) {
    #navigation {
        display: none;
    }
}
@media only screen and (min-width: 650px) {
    #navigation {
        margin: 2em 0 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #navigation a {
        line-height: 1;
        display: flex;
    }
    #navigation a svg {
        margin: 0;
        width: 100%;
        height: 1.6em;
    }
    #navigation #navigation-next,
    #navigation #navigation-previous {
        flex-grow: 1;
    }
    #navigation #navigation-center {
        width: 17%;
    }
    #navigation #navigation-next {
        transform: scale(-1, 1);
    }
    /* override underlining: */
    #navigation #navigation-previous,
    #navigation #navigation-next,
    #navigation #navigation-center {
        text-shadow: none;
        background: var(--GW-sequential-nav-link-background-color);
    }
}

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

#back-to-top {
    position: absolute;
    bottom: 0.75rem;
    opacity: 1.0;
    visibility: visible;
    transition:
        opacity 2s ease;
}
#back-to-top.hidden {
    opacity: 0;
}
#back-to-top a {
    display: block;
    width: 1.25em;
    color: var(--GW-back-to-top-link-color);
    filter:
        drop-shadow(0 0 1px var(--GW-body-background-color))
        drop-shadow(0 0 1px var(--GW-body-background-color))
        drop-shadow(0 0 1px var(--GW-body-background-color));
}
#back-to-top a:hover {
    color: var(--GW-back-to-top-link-hover-color);
}
#back-to-top svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1144px) {
    #back-to-top {
        left: 4rem;
    }
}
@media only screen and (min-width: 1145px) {
    #back-to-top {
        right: 1rem;
    }
}
@media only screen and (min-width: 1761px) {
    #back-to-top {
        left: unset;
        right: calc(64px + (100% - 1145px) / 2);
    }
}
@media only screen and (max-width: 649px) {
    #back-to-top {
        left: unset;
        right: 1rem;
        bottom: 1rem;
    }
    #back-to-top a {
        width: 2.25em;
        height: 2.25em;
        border: 1px solid currentColor;
        padding: 0.25em 0.25em;
        box-sizing: border-box;
    }
    #back-to-top {
        background-color: var(--GW-body-background-color);
        background-image: linear-gradient(var(--GW-back-to-top-link-color),
                                          var(--GW-back-to-top-link-color));
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 0 0;
    }
}

/*************/
/* DARK MODE */
/*************/

.dark-mode-selector {
    --mode-selector-button-base-left-margin: 1.375em;
    --mode-selector-button-base-left-spacing: 1.125em;
}

.dark-mode-selector button.select-mode-auto::before {
    content: url('/static/img/icon/adjust-solid.svg');
}
.dark-mode-selector button.select-mode-light::before {
    content: url('/static/img/icon/sun-solid.svg');
}
.dark-mode-selector button.select-mode-dark::before {
    content: url('/static/img/icon/moon-solid.svg');
}

.dark-mode-selector button.select-mode-dark {
    --mode-selector-button-left-adjust: -0.125em;
}

@media only screen and (min-width: 1535px) {
    #ui-elements-container .dark-mode-selector {
        right: 0;
        top: 0;
    }
}
@media only screen and (max-width: 1534px) {
    #ui-elements-container .dark-mode-selector {
        right: 0;
    }
}
@media only screen and (max-width: 1279px) {
    #ui-elements-container .dark-mode-selector button.select-mode-light {
        opacity: 0.15;
    }
}
@media only screen and (max-width: 649px) {
    #ui-elements-container .dark-mode-selector {
        bottom: 4em;
    }
    #ui-elements-container .dark-mode-selector button {
        border-width: 3px;
    }
    #ui-elements-container .dark-mode-selector button:last-child {
        margin-bottom: 1px;
    }
}

/***************/
/* READER MODE */
/***************/

/*┌───────────────────────────────────────────┐*/
/*│ Masked links key toggle info alert panel. │*/
/*└───────────────────────────────────────────┘*/

#masked-links-key-toggle-info-alert {
    position: absolute;
    background-color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-background-color);
    color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-color);
    text-shadow:
        0 0 1px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color),
        0 0 3px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color),
        0 0 5px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color);
    padding: 0.5em 1em;
    left: 2px;
    bottom: 1.5em;
    font-family: var(--GW-sans-serif-font-stack);
    font-weight: 700;
    pointer-events: none;
}
#masked-links-key-toggle-info-alert.hidden {
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.15s ease,
        opacity 0.15s ease;
}
#masked-links-key-toggle-info-alert img {
    display: inline-block;
    width: 1.25em;
    filter: invert(1) drop-shadow(0 0 3px var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color));
    vertical-align: text-bottom;
    margin: 0 0.625em 0 0;
    top: -0.05em;
    position: relative;
}
#masked-links-key-toggle-info-alert .key {
    border: 1px solid var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-key-icon-border-color);
    padding: 0.05em 0.375em 0.125em 0.375em;
    display: inline-block;
    border-radius: 4px;
    margin: 0 0.1875em 0 0.125em;
    background-color: var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-key-icon-background-color);
    box-shadow:
        1px 1px 3px 0 var(--GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color);
    font-feature-settings: 'smcp';
}

/*┌───────────────────────┐*/
/*│ Reader mode selector. │*/
/*└───────────────────────┘*/

.reader-mode-selector {
    --mode-selector-button-base-left-margin: 1.875em;
    --mode-selector-button-base-left-spacing: 1.25em;
}

.reader-mode-selector button.select-mode-auto::before {
    content: url('/static/img/icon/book-with-gear.svg');
}
.reader-mode-selector button.select-mode-on::before {
    content: url('/static/img/icon/book-open-solid.svg');
}
.reader-mode-selector button.select-mode-off::before {
    content: url('/static/img/icon/book-open.svg');
    bottom: 0.15em;
}

@media only screen and (min-width: 1800px) {
    #ui-elements-container .reader-mode-selector {
        right: 11em;
        top: 0;
    }
}
@media only screen and (max-width: 1799px) {
    #ui-elements-container .reader-mode-selector {
        right: 0;
        top: 2em;
    }
}
@media only screen and (max-width: 1534px) {
    #ui-elements-container .reader-mode-selector {
        top: 7em;
    }
}
@media only screen and (max-width: 1279px) {
    #ui-elements-container .reader-mode-selector button.select-mode-off {
        opacity: 0.15;
    }
    #ui-elements-container .reader-mode-selector button.select-mode-off:hover,
    #ui-elements-container .reader-mode-selector button.select-mode-off.selected {
        opacity: 0.6;
    }
}
@media only screen and (max-width: 649px) {
    #ui-elements-container .reader-mode-selector {
        bottom: 12em;
    }
    #ui-elements-container .reader-mode-selector button {
        border-width: 5px 3px 1px 3px;
    }
}

/******************/
/* MODE SELECTORS */
/******************/

.mode-selector {
    padding: 0 0.125em 0.125em 0.125em;
    background-color: var(--GW-mode-selector-background-color);
}

/*  Mode selector buttons.
 */

.mode-selector button {
    --mode-selector-button-left-adjust: 0px;

    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    padding: 0.5em;
    line-height: 1;
    font-family: var(--GW-sans-serif-font-stack);
    font-size: 0.75rem;
    text-align: center;
    color: var(--GW-mode-selector-button-text-color);
    position: relative;
    display: flex;
    margin: 0 0 0 calc(  var(--mode-selector-button-base-left-margin)
                       + var(--mode-selector-button-left-adjust));
}
.mode-selector button::before {
    position: absolute;
    width: 1.4em;
    height: 1.4em;
    left: calc(-1 * (  var(--mode-selector-button-base-left-spacing)
                     + var(--mode-selector-button-left-adjust)));
    opacity: 0.4;
}
.mode-selector button:not(.selected):hover::before {
    opacity: 1.0;
}
.mode-selector button:not(:disabled):hover {
    color: var(--GW-mode-selector-button-hover-text-color);
    cursor: pointer;
}
.mode-selector button:not(:disabled):active {
    transform: translateY(2px);
}
.mode-selector button:hover::after,
.mode-selector button.selected::after,
.mode-selector button.active:not(:hover)::after {
    content: "";
    position: absolute;
    bottom: 0.25em;
    left: 0;
    right: 0;
    width: calc(100% - 12px);
    margin: auto;
}
.mode-selector button:not(:disabled):active::after {
    transform: translateY(-2px);
}
.mode-selector button:hover::after,
.mode-selector button.selected::after {
    border-bottom: 1px solid currentColor;
}
.mode-selector button.active:not(:hover)::after {
    border-bottom: 1px dotted currentColor;
}

/*  Inline mode selectors.
 */

.mode-selector-inline {
    --GW-mode-selector-background-color: var(--GW-link-underline-background-color);

    display: inline;
    position: relative;
    bottom: 0.125em;
}

.mode-selector-inline button {
    display: inline-block;
    margin: 0 0 0 calc(  var(--mode-selector-button-base-left-margin)
                       + var(--mode-selector-button-left-adjust)
                       - 0.25em);
}

/*  Fixed mode selectors.
 */

#ui-elements-container .mode-selector {
    position: absolute;
    display: flex;
    box-sizing: content-box;
    margin: 3px;
    opacity: 0.3;
    transition:
        opacity 2s ease;
}
#ui-elements-container .mode-selector:hover {
    transition: none;
    opacity: 1.0;
}
#ui-elements-container .mode-selector.hidden {
    opacity: 0;
}

@media only screen and (hover: hover) {
    #ui-elements-container .mode-selector {
        outline: 3px solid transparent;
    }
    #ui-elements-container .mode-selector:hover {
        outline: 3px double var(--GW-mode-selector-border-hover-color);
    }
}
@media only screen and (hover: none) {
    #ui-elements-container .mode-selector {
        outline: 1px dotted var(--GW-mode-selector-border-hover-color);
    }
}

@media only screen and (max-width: 1534px) {
    #ui-elements-container .mode-selector {
        flex-flow: column;
        padding: 0.15em 0.1em;
        align-items: flex-start;
    }
    #ui-elements-container .mode-selector button + button {
        margin-top: 0.25em;
    }
}
@media only screen and (max-width: 1279px) {
    #ui-elements-container .mode-selector {
        background-color: var(--GW-mode-selector-mobile-background-color);
        opacity: 1.0;
    }
    #ui-elements-container .mode-selector button {
        margin: 0;
        padding: 0;
        width: 2em;
        height: 2em;
        align-items: center;
        box-shadow: none;
        color: transparent;
        opacity: 0.1;
    }
    #ui-elements-container .mode-selector button + button {
        margin-top: 0.5em;
    }
    #ui-elements-container .mode-selector button:hover,
    #ui-elements-container .mode-selector button.selected {
        opacity: 0.5;
    }
    #ui-elements-container .mode-selector button::before {
        left: 12.5%;
        width: 75%;
        height: 75%;
        opacity: 1.0;
    }
    #ui-elements-container .mode-selector button:not(:disabled):hover {
        color: transparent;
    }
}
@media only screen and (max-width: 649px) {
    #ui-elements-container .mode-selector {
        top: unset;
        padding: 0;
    }
    #ui-elements-container .mode-selector button {
        width: 3em;
        height: 3em;
        border-style: solid;
        border-color: transparent;
    }
    #ui-elements-container .mode-selector button + button {
        margin-top: 0;
    }
}

/****************/
/* TRANSCLUSION */
/****************/

a.include-loading:empty,
a.include-loading-failed:empty {
    margin: 0;
}
.markdownBody a.include-loading:empty,
.markdownBody a.include-loading-failed:empty {
    background: none;
}

a.include-loading.include-spinner {
    pointer-events: none;
    --spinner-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z"/></svg>');
}

/*  Loading spinner.
 */
a.include-loading.include-spinner::after {
    display: inline-block;
    animation: fa-spin 2s infinite linear;
    position: relative;
    opacity: 0.5;
    top: 0.25em;
}

a.include-loading.include-spinner:empty::after {
    content: var(--spinner-image);
    width: 1.25em;
    height: 1.25em;
    margin: 0;
}

a.include-loading.include-spinner:not(:empty)::after,
a.include-loading.include-spinner[data-link-icon]:not(:empty)::after {
    background-image: var(--spinner-image);
}
a.include-loading.include-spinner:not(:empty)::after {
    --spinner-size: 0.9em;

    background-size: var(--spinner-size);
    content: "";
    font-size: var(--spinner-size);
    width: var(--spinner-size);
    height: var(--spinner-size);
    margin: 0 0.1em 0 0.2em;
    top: unset;
    bottom: 0;
}
a.include-loading.include-spinner[data-link-icon]:not(:empty)::after {
    padding: 0;
    background-position: 0 0;
}

/*****************/
/*  Block context.
 */
.markdownBody a.targeted {
    position: relative;
    display: inline-block;
    z-index: 1;
    text-indent: 0;
}
@media all and (min-width: 650px) {
    .markdownBody a.targeted {
        height: 1.5em;
    }
}
.markdownBody a.targeted::before {
    content: "";
    position: absolute;
    width: calc(100% + 0.5em);
    height: 115%;
    left: calc(-0.4em);
    top: -15%;
    z-index: -1;
    border-color: transparent;
    border-style: double;
    border-width: 3px;
    border-color: var(--GW-footnote-ref-highlight-box-shadow-color);
    outline: none;
}

.markdownBody a.footnote-ref.targeted {
    display: initial;
}
.markdownBody a.footnote-ref.targeted::before {
    height: 125%;
    left: calc(-0.25em - 3px);
    top: -3px;
}


/***********/
/* CONSOLE */
/***********/

#console {
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 3px double #000;
    font-family: var(--GW-monospaced-font-stack);
    max-height: 50vh;
    display: flex;
    flex-flow: column;
    z-index: 1;
    opacity: 1;
    transition:
        opacity 0.1s ease-out,
        bottom 0.1s ease-out;
}
#console.hidden {
    transition:
        opacity 0.1s ease-in,
        bottom 0.1s ease-in;
}

#console .console-scroll-view {
    border-bottom: 1px solid #000;
    min-height: 2em;
    overflow-y: scroll;
    overscroll-behavior: none;
    display: flex;
    flex-flow: column;
}

#console .console-content-view {
    flex: 1 0 auto;
    padding: 2px;
    font-size: 0.8rem;
    line-height: calc(22/16);
    tab-size: 4;
}
#console .console-content-view p {
    margin: 0;
    text-indent: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

#console .console-command-line {
    display: flex;
    height: 1.75em;
}

#console .console-command-line-prompt {
    padding: 0 0.5em 0 0.25em;
    display: flex;
    line-height: 1.75;
    font-size: 1rem;
}
#console .console-command-line-prompt::after {
    content: ">";
    padding: 0 0 0 0.5em;
    margin: 0 0 0 0.375em;
    border-left: 1px solid #000;
}

#console .console-command-line-entry-field {
    flex: 1 0 auto;
}
#console .console-command-line-entry-field input {
    appearance: none;
    border: none;
    background-color: inherit;
    height: 100%;
    display: block;
    width: 100%;
    padding: 0 0.5em 0 0;
    font-family: var(--GW-monospaced-font-stack);
    font-size: 1rem;
}
#console .console-command-line-entry-field input:focus {
    outline: none;
}