@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 */

/****************/
/* FIXED COLORS */
/****************/
/* Not to be inverted in dark mode! */

:root {
    --GW-object-popup-background-color: #fff;
}

/*******************/
/* 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-transclude-popup-min-width: 360px;
    --GW-popups-local-transclude-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: 50vh;
    --GW-popins-popin-min-height: 120px;
    --GW-popins-popin-border-width: 3px;
    --GW-popins-popin-title-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: 4.5rem;
    position: relative;
    overflow: hidden;
    padding: 0 0 2rem 0;
    box-sizing: border-box;
    margin: 1em 0;
}
.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 summary.
    */
.collapse .abstract-collapse {
    margin: 0;
    position: relative;
    z-index: 1;
}
.collapse .abstract-collapse.abstract {
    margin-left: calc(-0.5em - 2px);
}
.collapse .abstract-collapse:not(.abstract) {
    margin: 1.5em 0 0.25em 0;
}
.collapse.expanded > .abstract-collapse:not(.abstract) {
    margin-bottom: 0;
}
.collapse:not(.expanded) > .abstract-collapse {
    pointer-events: none;
    position: relative;
    z-index: 3;
}
.collapse:not(.expanded) > .abstract-collapse blockquote {
    margin: 0;
}
.collapse:not(.expanded) > .disclosure-button:hover + .abstract-collapse blockquote {
    background-color: var(--GW-collapse-summary-blockquote-hover-color);
}

/*  Disclosure button.
    */
.disclosure-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    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(--GW-collapse-disclosure-button-color) inset;
    transition:
        box-shadow 0.1s ease;
}
.disclosure-button:hover {
    z-index: 1;
    box-shadow:
        0.5em 0 0 0 var(--GW-collapse-disclosure-button-hover-color) inset;
}
.disclosure-button:checked {
    pointer-events: none;
    background-color: transparent;
}
.disclosure-button:focus {
    outline: none;
}

/*  Top and bottom parts of disclosure button.
    */
.disclosure-button::before,
.disclosure-button::after {
    background-color: var(--GW-collapse-disclosure-button-color);
    transition:
        color 0.1s ease,
        background-color 0.1s ease;
}
.disclosure-button:hover::before,
.disclosure-button:hover::after {
    background-color: var(--GW-collapse-disclosure-button-hover-color);
}
.disclosure-button:checked::before,
.disclosure-button:checked::after {
    pointer-events: auto;
}

/*  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: 0.875rem 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: 2;
    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;
}

/*  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::before,
:not(section).collapse:not(.expanded) > .disclosure-button::after {
    opacity: 0.95;
}
:not(section).collapse:not(.expanded) > .disclosure-button ~ :not(.abstract-collapse) {
    max-height: 5rem;
}
:not(section).collapse.expanded {
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
    padding: 3.5rem 0 2.5rem 1em;
}

/*  Collapsible code blocks.
    */
.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 :not(section).collapse:not(.expanded) > .disclosure-button::before,
.sourceCode :not(section).collapse:not(.expanded) > .disclosure-button::after,
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button::before,
.sourceCode:not(section).collapse:not(.expanded) > .disclosure-button::after {
    opacity: 0.7;
    text-shadow: none;
}

/*  Collapsible tables.
    */
.table-wrapper > .collapse {
    margin: 0;
}
.table-wrapper > .collapse:not(.expanded) {
    max-height: 5rem;
}

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

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

#footer {
    padding-top: 2em;
    text-align: center;
    margin: 0 0 2em 0;
}

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

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

[class^='horizontalRule'] {
    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,
.horizontalRule-nth-0 hr::after {
    /* https://commons.wikimedia.org/wiki/File:Sun_of_Vergina_black.svg */
    content: url('/static/img/icons/sun-verginasun-black.svg');
    opacity: 0.87;
    width: 40px;
    height: 40px;
}
.horizontalRule-nth-1 hr::after {
    /* https://commons.wikimedia.org/wiki/File:Japanese_crest_Tsuki_ni_Hoshi.svg */
    /* NOTE: alternative moon icon is /static/img/icons/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/icons/japanesecrest-tsukinihoshi-dottedmoon.svg');
    opacity: 0.90;
    width: 25px;
    height: 25px;
}
.horizontalRule-nth-2 hr::after {
    content: url('/static/img/icons/asterism-triplewhitestar.svg');
    width: 36px;
    height: 30px;
}
.horizontalRule-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;
}

blockquote .TOC {
    margin: 1em 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. */
}

blockquote .TOC > ul {
    column-width: 12em;
}

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

/*************************/
/* TAG DIRECTORY INDEXES */
/*************************/

.directory-indexes.columns ul {
    clear: none;
}

/***********/
/* 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 {
    list-style-type: none;
    margin: 1.25em 0 1.5em 0;
    padding: 0 0 0 2.5em;
}
#markdownBody ul,
#markdownBody ol {
    display: flow-root;
}
li > ul,
li > ol {
    margin: 0.5em 0;
}

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

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

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

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

ul ul:last-child,
ul ol:last-child,
ol ol:last-child,
ol ul:last-child {
    margin-bottom: 0;
}
p + ul,
p + ol {
    margin-top: 0.5em;
}

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

ul > li::before,
ul ul ul ul > li::before {
    content: url('/static/img/icons/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 ul > li::before {
    content: url('/static/img/icons/single-white-star.svg');
    opacity: initial;
}
ul ul ul > li::before,
ul ul ul ul ul ul > li::before,
body.index ul ul > li::before {
    /* this rotates into more of a 'lozenge' square for variety's sake */
    content: url('/static/img/icons/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 only screen and (max-width: 649px) {
    figure {
        max-width: calc(100% - 2em);
    }
}
figure + figure {
    margin-top: 2.75em;
}
@media only screen and (max-width: 649px) {
    figure + figure {
        margin-top: 2em;
    }
}

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

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 only screen 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-no .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](/images/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 only screen and (min-width: 650px) {
    figure.float-right {
        float: right;
        max-width: calc(50% - 1.5em);
        margin: 0 0 1em 1.5em;
    }
    figure.float-left {
        float: left;
        max-width: calc(50% - 1.5em);
        margin: 0 1.5em 1em 0;
    }
    p ~ figure.float-right,
    p ~ figure.float-left {
        margin-top: 0.5em;
    }
}

/* try to get edge-to-edge images on mobile to maximize horizontal space usage */
@media only screen 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 {
    display: block;
    font-family: var(--GW-sans-serif-font-stack);
    padding: 0.5em 0.75em;
    background-color: var(--GW-body-background-color);
    text-align: left;
}

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

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

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

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://www.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;
}

/*************/
/* 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;
    margin: 0;
    font-size: inherit;
    position: relative;
    z-index: 1;
    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::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;
}

@media only screen 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 only screen 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://www.gwern.net/docs/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-column-left,
#sidenote-column-right {
    position: absolute;
    max-width: var(--GW-sidenotes-max-width);
    font-size: 0.85em;
    z-index: 1;
    pointer-events: none;
}
#sidenote-column-left > *,
#sidenote-column-right > * {
    pointer-events: auto;
}
#sidenote-column-left {
    height: calc(100% - 10rem);
    width: calc(50vw - (50% + 92px));
    top: 10rem;
    right: calc(100% + 64px);
}
#sidenote-column-right {
    height: 100%;
    width: calc(50vw - (50% + 104px));
    top: 0;
    left: calc(100% + 60px);
}

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

.sidenote {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.85;
    line-height: 1.5;
    padding: 2em 0 0 0;
}
.sidenote.hidden {
    display: none;
}
.sidenote.highlighted,
.sidenote:hover,
.sidenote:target,
.sidenote.targeted {
    background-color: var(--GW-sidenote-highlight-background-color);
    opacity: 1.0;
}
.sidenote:target {
    z-index: 1;
}
.sidenote.highlighted,
.sidenote:hover {
    z-index: 2;
}

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

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

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

/*  Scroll bar styles (for WebKit/Chromium).
    */
.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
    width: 12px;
}
.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb {
    background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7');
    box-shadow:
        0 0 0 2px var(--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 {
    padding: 0 0 0 1.75em;
}

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

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

.sidenote > .sidenote-self-link {
    font-weight: 600;
    position: absolute;
    top: 0;
    border-style: dotted;
    border-color: var(--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: initial;
    /*  965px because that’s the width of #markdownBody at the widths where we
        get margin notes. Someday, find a way to auto-compute this (but note
        that `50%` doesn’t work in place of `(965px / 2)`; it breaks when the
        margin note is within a narrower block, like a <p> within an <ol>).
        —SA 2022-03-28
     */
    width: calc(50vw - ((965px / 2) + 104px));
    max-width: var(--GW-sidenotes-max-width);
    left: calc(100% + 60px);

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

    font-size: calc(var(--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:hover {
    box-shadow: none;
}
/* make links in margin notes (somewhat unusual but should be supported simply because that's what one would expect) clickable/hover-able */
.sidenote.marginnote::after {
    z-index: -1;
}

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

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

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

table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
    font-size: 0.75em;
    border-style: solid;
    border-color: var(--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');
}

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

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

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

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

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

/*  SUPERSCRIPT+SUBSCRIPT (necessary for inflation adjuster, and other math)
    */
.supsub {
    display: inline-block;
    margin-left: 0.1em;
    text-indent: initial; /* override the `p + p { text-indent: 2.5em; }` */
}
.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: 0.7em;
    line-height: 0.7;
}
.supsub sub {
    top: .2em;
}
/*  Make sure that adjusted prices move as a block: no breaking in the middle between the price & sup/sub; this works better than trying to use no-break Unicode entities
    */
span.inflationAdjusted {
    white-space: nowrap;
}

/*************/
/* DROP CAPS */
/*************/
/*  "drop caps"/"initials" (https://en.wikipedia.org/wiki/Initial
    https://wiki.obormot.net/Reference/DropCapsDemo) are large fancy
    block letters used to start a page/section.

    The 5 drop-caps right now are Cheshire ('drop-caps-cheshire') (https://www.dafont.com/cheshire-initials.font), Goudy Initialen (https://www.1001fonts.com/goudy-initialen-font.html)
    ('drop-caps-goudy'), yinit (https://www.tug.org/TUGboat/tb12-1/tb31hara.pdf#page=8) ('drop-caps-yinit'), Kanzlei Initialen ('drop-caps-kanzlei') (https://wiki.obormot.net/Main/BonusFontsDemo?demo_font_one=Kanzlei+Initialen), and
    De-Zs/Deutsche Zierschrift (https://www.typografie.info/3/Schriften/fonts.html/deutsche-zierschrift-r250/) ('drop-caps-de-zs').

    Drop-caps are used to subtly 'theme' pages: Cheshire is for literary pages, Goudy is for
    historical/humanities pages, Kanzlei is for light technical/scientific pages, while yinit is for hardcore technical/scientific
    pages (if it has a lot of equations, it's yinit), and De-Zs is for everything else (such as newsletters).

    We use them on desktop & skip them on mobile because
    they use up 8-12KB each (even after @font-face subset optimization to load
    only 1 letter at a time), and take up a lot of screen space.
    (Mobile users can't have nice things.)

    To implement them, each Markdown
    page has a custom metadata field like "css: drop-caps-goudy" which is
    substituted into the compiled HTML like
    '<body class="pagename drop-caps-goudy">', allowing defining of multiple
    drop-caps and customized per page. The body class then is read by JS
    (currently: `rewrite.js` l841, the `dropCapBlocksSelector` variable) which
    actually sets it on relevant paragraphs. It would be difficult to define 'first paragraph'
    at the start of the page correctly without many special-case pure-CSS selectors.
    (Drop-caps in arbitrary manually-specified places, like appendices or split-out articles,
    are supported by a separate 'drop-cap' singular class which can wrap either the abstract
    or a specific <p>.)
    */
@media only screen and (min-width: 650px) {
    *[class*='drop-cap-']::first-letter,
    *[class*='drop-cap-'] > p:first-child::first-letter {
        font-style: normal;
        font-weight: normal;
        float: left;
    }

    /*  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 only screen 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 only screen 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-archives#overall-coverage or /Replication */
/* Uses CSS3 columns: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://www.caniuse.com/#feat=multicolumn */
/* Currently limited to lists due to issues with hidden:overflow in FF and sidenotes.js in Chrome. */
.columns > ul,
.columns > ol {
    column-width: 15em;
    column-gap: 3em;
    margin-bottom: 2em;

    /*  Without `clear`, columns don’t render properly if there’s a float.
     */
    clear: both;
}
.markdownBody .columns li,
.markdownBody .columns li p {
    text-align: left;
    break-inside: avoid;
}

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

/***************/
/* ADMONITIONS */
/***************/
/* Highlighted boxes: 'admonitions' are small break-out boxes with notes, tips, warnings, etc. for the reader.  */
/* These are particularly useful in didactic technical writing, where there are many ways to slip up while using or coding something. */
/* Available (in increasing order of minatoriness): 'tip', 'note', 'warning', 'error'. */
/* Based on Markdeep's implementation: https://casual-effects.com/markdeep/features.md.html#basicformatting/admonitions (which appears loosely inspired by Wikipedia's notification templates like `{{NPOV}}`) */
/* and modified to grayscale (increasing intensity == increasing warning) for Gwern.net. */
/* Usage examples: */
/* - <div class="admonition tip"><div class="admonition-title">Tip title (optional)</div> text</div> */
/* - <div class="admonition note"><div class="admonition-title">Note title (*)</div> text</div> */
/* - <div class="admonition warning"><div class="admonition-title">Warning title (*)</div> text</div> */
/* - <div class="admonition error"><div class="admonition-title">Error title (*)</div> text</div> */
.admonition {
    --admonition-background-color: var(--GW-admonition-default-background-color);
    --admonition-left-border-color: var(--GW-admonition-default-left-border-color);
    --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.tip {
    --admonition-background-color: var(--GW-admonition-tip-background-color);
    --admonition-left-border-color: var(--GW-admonition-tip-left-border-color);
}
.admonition.warn,
.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/icons/info-circle.svg');
}
.admonition.note::before {
    content: url('/static/img/icons/arrow-right-white.svg');
    padding: 0.85em;
}
.admonition.warn::before,
.admonition.warning::before {
    content: url('/static/img/icons/exclamation-triangle-white.svg');
    padding-top: 0.75em;
}
.admonition.error::before {
    content: url('/static/img/icons/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.warn,
.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.warn,
.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.warn a,
.admonition.warning a,
.admonition.error a {
    color: var(--GW-admonition-reversed-link-color);
}
.admonition.warn a:hover,
.admonition.warning a:hover,
.admonition.error a:hover {
    color: var(--GW-admonition-reversed-link-color-hover);
}

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

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

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

/*  Header self-links on home page need not be full-width. */
body.index article #markdownBody section:not(.collapse) > h1:first-child a {
    display: inline;
}

/*  Internal links on the home page need no decoration. */
body.index #markdownBody a[href^="."]:not([href*="/docs/"]):not([href*="/images/"])::after,
body.index #markdownBody a[href^="https://www.gwern.net/"]:not([href$=".pdf"])::after {
    content: none;
}

/*  The /index needs more space in the lists for mobile users */
@media only screen and (max-width: 649px) {
    body.index #markdownBody li {
        line-height: 1.65;
    }
}

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

/*  Nice-looking bottom decoration.
    */
body.index article,
body.index-directory article {
    position: relative;
    padding-bottom: 4em;
}
body.index article::after,
body.index-directory article::after {
    content: "";
    background-color: var(--GW-body-background-color);
    background-image: url('/static/img/logo/logo-smooth.svg');
    display: block;
    position: absolute;
    bottom: 0.75em;
    width: 22px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0 10px 0 11px;
    z-index: 1;
}
body.index article::before,
body.index-directory article::before {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(0.75em + 15px);
    height: 1px;
    border-bottom: 1px dotted var(--GW-index-page-bottom-ornament-line-color);
    width: 100%;
}

/* 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 only screen and (min-width: 650px) {
/*  Horizontal ruler on the home page.
    */
    body.index hr {
        margin: 1.5em 0 0;
    }
    body.index [class^='horizontalRule'] {
        display: none;
    }
}

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

/*=----------------=*/
/*= /reviews/Books =*/
/*=----------------=*/

body.reviews-books #markdownBody blockquote {
  clear: none;
}
body.reviews-books #markdownBody ol {
  overflow: unset;
}

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

/*=---------------=*/
/*= /reviews/Mead =*/
/*=---------------=*/

/*  This is for the pictures of mead bottles next to the reviews.
    */
body.reviews-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-arrests =*/
/*=--------------=*/

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

/*=--------=*/
/*= /Lorem =*/
/*=--------=*/

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

/*=--------=*/
/*= /otaku =*/
/*=--------=*/

body.otaku blockquote {
    overflow: hidden;
    clear: none;
}

/****************************/
/* 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 .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 .TOC > ul {
    column-width: 12em;
}

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

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

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

.popframe:not(.zoomed) p + ul,
.popframe:not(.zoomed) p + ol {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.popframe:not(.zoomed) li {
    text-align: left;
}

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

.popframe:not(.zoomed) blockquote {
    margin: 1em 0;
}

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

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

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

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

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

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

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

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

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

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

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

.popframe.backlinks .columns ul {
    margin: 0.75em 0 1em 0;
    padding: 0 0 0 1.75em;
}

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

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

.popframe.annotation .data-field.title {
    font-weight: bold;
    font-size: 1.125em;
    line-height: 1.35;
}
.popframe.annotation .data-field.author {
    font-style: italic;
}
.popframe.annotation .date-plus-cites {
    display: inline-block;
}
.popframe.annotation .originalURL {
    font-variant-caps: small-caps;
    margin: 0 0.5em 0 0;
    font-size: 0.875em;
}
.popframe.annotation .iaMirror {
    padding-right: 0.3em;
}
.popframe.annotation .link-tags a {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}
.popframe.annotation .data-field.annotation-abstract {
    margin-top: 0.5em;
}

/*  Images (such as the ones in Wikipedia pop-frames).
    */
.popframe.annotation .popframe-content-view > figure.float-right {
    margin: 0.125em 0 0.125em 1.5em;
    max-width: calc(50% - 1.5em);
    float: right;
}
.popframe.annotation figure.float-left .image-wrapper,
.popframe.annotation figure.float-right .image-wrapper {
    max-width: 100%;
}
.popframe.annotation figure img {
    width: 100%;
}

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

/*  Special case for inline math in Wikipedia pop-frames.
    */
.wikipedia-entry .mwe-math-element {
    display: inline-block;
    height: 1.25em;
    line-height: 1;
    margin: 0;
    vertical-align: bottom;
    padding: 0;
    text-indent: 0;
}
.wikipedia-entry .mwe-math-element img {
    display: inline-block;
    height: 100%;
}
/*  Ditto, but block math.
 */
.wikipedia-entry dl .mwe-math-element {
    display: block;
    height: unset;
}
.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! */
.wikipedia-entry cite, 
.wikipedia-entry dfn {
	font-style: inherit; 
}

/*┌──────────────────────┐*/
/*│ Footnote pop-frames. │*/
/*└──────────────────────┘*/
/* http://ignorethecode.net/blog/2010/04/20/footnotes/ */

.popframe.footnote .popframe-content-view > 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.local-code-file .popframe-content-view div.sourceCode {
    height: 100%;
}
.popframe.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.local-code-file pre.raw-code {
    white-space: pre-wrap;
}
.popframe.local-code-file pre.raw-code code {
    word-break: break-word;
    padding-left: 2px;
    padding-right: 2px;
}
.popframe.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.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.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;
}

.popframe.object img,
.popframe.object video,
.popframe.object iframe,
.popframe.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-transclude .popframe-content-view {
    overflow-x: hidden;
}

.popframe .popframe-content-view > h1:first-child,
.popframe .popframe-content-view > h2:first-child,
.popframe .popframe-content-view > h3:first-child,
.popframe .popframe-content-view > h4:first-child,
.popframe .popframe-content-view > h5:first-child,
.popframe .popframe-content-view > h6:first-child {
    margin-top: 0;
}

.popframe #page-metadata {
    margin: 0;
    overflow: visible;
}
.popframe #page-metadata::after {
    content: "";
    display: block;
    border-bottom: 1px dotted currentColor;
}

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

.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 {
    background-color: var(--GW-popups-popup-background-color);
    font-size: 0.9em;
    padding: calc(7em/9) 1em calc(8em/9) 1em;
    overflow: auto;
    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;
    display: block;
    justify-content: center;
    align-items: center;
    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.backlinks {
    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);
}

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

.popup.object iframe,
.popup.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.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.image img.invertible,
.popup.image img.invertible-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.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-transclude {
    min-width: var(--GW-popups-local-transclude-popup-min-width);
    min-height: var(--GW-popups-local-transclude-popup-min-height);
}

/*  Table of contents popups.
    */
.popup.local-transclude.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.external-page-embed {
    width: var(--GW-popups-popup-max-width);
    height: var(--GW-popups-popup-max-height);
}

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

/*┌─────────────┐*/
/*│ Tag popups. │*/
/*└─────────────┘*/
/* on tag/directory index popups, we want to hide the initial '# Links' <h1> because it takes up way too much space and adds nothing. */
.popup h1.display-pop-not, 
.popin h1.display-pop-not {
	display: none;
}

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

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

.popup:not(.pinned) .popframe-content-view .image-wrapper::after {
    display: none;
}

/*  Page thumbnails in local page transclude popups.
 */
.popup .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;
    float: left;
    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 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: 14px;
}
.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);
    font-size: 0.9em;
    padding: calc(7em/9) 1em calc(8em/9) 1em;
    overflow: auto;
}

/*┌───────────────────────────┐*/
/*│ 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;
    display: block;
    justify-content: center;
    align-items: center;
    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.image.loading img,
.popin.image.loading-failed img,
.popin.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;
    text-align: left;
    text-indent: 0;
}
.popin-open:not(.footnote-ref)::before,
.popin-open:not(.footnote-ref):hover::before {
    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 TYPES =*/
/*=-------------=*/

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

@media only screen and (max-width: 649px) {
    .popin .annotation-abstract figure:first-child {
        margin-top: 1.75em;
    }
    .popin .annotation-abstract.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.object iframe,
.popin.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.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-popin {
    padding: 0;
}

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

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

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

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

.popin #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;
}

/*********************/
/* SEQUENTIAL NAV UI */
/*********************/
/* Navigation bar for previous/next page links (horizontal divider based on: https://commons.wikimedia.org/wiki/File:Filet_arabesque.svg ) */

@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,
        visibility 2s ease;
}
#back-to-top.hidden {
    opacity: 0;
    visibility: hidden;
}
#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%;
}

@media only screen and (max-width: 1184px) {
    #back-to-top {
        left: 4rem;
    }
}
@media only screen and (min-width: 1185px) {
    #back-to-top {
        right: 1rem;
    }
}
@media only screen and (min-width: 1761px) {
    #back-to-top {
        left: unset;
        right: calc(60px + (100% - 1185px) / 2);
    }
}
@media only screen and (max-width: 649px) {
    #back-to-top {
        left: unset;
        right: 1rem;
        bottom: 1rem;
    }
    #back-to-top a {
        width: 1.5em;
        border: 2px solid currentColor;
        background-color: var(--GW-body-background-color);
        padding: 0.125em 0.25em;
    }
}

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

#mode-selector {
    position: absolute;
    right: 0;
    display: flex;
    background-color: var(--GW-mode-selector-background-color);
    padding: 0.1em 0.25em 0.3em 0.25em;
    border: 3px solid transparent;
    opacity: 0.3;
    transition:
        opacity 2s ease;
}
#mode-selector.hidden {
    opacity: 0;
}
#mode-selector:hover {
    transition: none;
    opacity: 1.0;
    border: 3px double var(--GW-mode-selector-border-hover-color);
}
#mode-selector button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    padding: 0.5em;
    margin: 0 0 0 1.375em;
    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;
}
#mode-selector button::before {
    width: 1.2em;
    position: absolute;
    left: -15px;
    opacity: 0.35;
    padding: 1px 0 0 0;
}
#mode-selector button.select-mode-auto::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>');
}
#mode-selector button.select-mode-light::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>');
    opacity: 0.45;
    width: 1.3em;
    padding: 0;
    left: -15px;
}
#mode-selector button.select-mode-dark {
    margin-left: 1.125em;
}
#mode-selector button.select-mode-dark::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>');
    width: 1.15em;
    left: -12px;
}
#mode-selector button:not(.selected):hover::before {
    opacity: 1.0;
}
#mode-selector button:hover,
#mode-selector button.selected {
    box-shadow:
        0 2px 0 6px var(--GW-mode-selector-background-color) inset,
        0 1px 0 6px currentColor inset;
}
#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);
    box-shadow:
        0 0px 0 6px var(--GW-mode-selector-background-color) inset,
        0 -1px 0 6px currentColor inset;
}
#mode-selector button.active:not(:hover)::after {
    content: "";
    position: absolute;
    bottom: 0.25em;
    left: 0;
    right: 0;
    border-bottom: 1px dotted currentColor;
    width: calc(100% - 12px);
    margin: auto;
}
@media only screen and (max-width: 1535px) {
    #mode-selector {
        flex-flow: column;
        padding: 0.1em 0.1em 0.2em 0.15em;
        align-items: flex-start;
    }
    #mode-selector button + button {
        margin-top: 0.25em;
    }
    #mode-selector button.select-mode-light::before {
        left: -16px;
    }
    #mode-selector button.select-mode-dark {
        margin-left: 1.375em;
    }
    #mode-selector button.select-mode-dark::before {
        left: -15px;
    }
}
@media only screen and (max-width: 1279px) {
    #mode-selector {
        padding: 0.1em 0.1em 0.25em 0.15em;
    }
    #mode-selector button[class^='select-mode-'] {
        color: transparent;
        margin: 0;
        padding: 0;
        width: 2em;
        height: 2em;
        align-items: center;
        box-shadow: none;
        opacity: 0.55;
    }
    #mode-selector  button[class^='select-mode-'] + button {
        margin-top: 0.5em;
    }
    #mode-selector button[class^='select-mode-']::before {
        left: 12.5%;
        width: 75%;
        height: 75%;
    }
    #mode-selector button:not(:disabled):hover {
        color: transparent;
    }
    #mode-selector button:hover,
    #mode-selector button.selected {
        opacity: 1.0;
    }
}
@media only screen and (max-width: 649px) {
    #mode-selector {
        top: unset;
        bottom: 4em;
    }
    #mode-selector button[class^='select-mode-'] {
        width: 2.25em;
        height: 2.25em;
    }
}

/***************/
/* 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 {
    position: absolute;
    right: 11em;
    display: flex;
    background-color: var(--GW-mode-selector-background-color);
    padding: 0.1em 0.25em 0.3em 0.25em;
    border: 3px solid transparent;
    opacity: 0.3;
    transition:
        opacity 2s ease;
}
#reader-mode-selector.hidden {
    opacity: 0;
}
#reader-mode-selector:hover {
    transition: none;
    opacity: 1.0;
    border: 3px double var(--GW-mode-selector-border-hover-color);
}
#reader-mode-selector button {
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    padding: 0.5em;
    margin: 0 0 0 1.875em;
    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;
}
#reader-mode-selector button::before {
    width: calc(7/5 * 1em);
    height: calc(7/5 * 1em);
    position: absolute;
    left: calc(1px + -4/3 * 1em);
    opacity: 0.4;
    top: 0.5em;
}
#reader-mode-selector button.select-mode-auto::before {
    content: url('/static/img/icons/book-with-gear.svg');
    top: 0.4em;
}
#reader-mode-selector button.select-mode-on::before {
    content: url('/static/img/icons/book-open-solid.svg');
}
#reader-mode-selector button.select-mode-off::before {
    content: url('/static/img/icons/book-open.svg');
}
#reader-mode-selector button:not(.selected):hover::before {
    opacity: 1.0;
}
#reader-mode-selector button:hover,
#reader-mode-selector button.selected {
    box-shadow:
        0 2px 0 6px var(--GW-mode-selector-background-color) inset,
        0 1px 0 6px currentColor inset;
}
#reader-mode-selector button:not(:disabled):hover {
    color: var(--GW-mode-selector-button-hover-text-color);
    cursor: pointer;
}
#reader-mode-selector button:not(:disabled):active {
    transform: translateY(2px);
    box-shadow:
        0 0px 0 6px var(--GW-mode-selector-background-color) inset,
        0 -1px 0 6px currentColor inset;
}
#reader-mode-selector button.active:not(:hover)::after {
    content: "";
    position: absolute;
    bottom: 0.25em;
    left: 0;
    right: 0;
    border-bottom: 1px dotted currentColor;
    width: calc(100% - 12px);
    margin: auto;
}
@media only screen and (max-width: 1800px) {
    #reader-mode-selector {
        right: 0;
        top: 2em;
    }
}
@media only screen and (max-width: 1535px) {
    #reader-mode-selector {
        flex-flow: column;
        padding: 0.1em 0.1em 0.2em 0.15em;
        align-items: flex-start;
        top: 7em;
    }
    #reader-mode-selector button + button {
        margin-top: 0.25em;
    }
}
@media only screen and (max-width: 1279px) {
    #reader-mode-selector {
        padding: 0.1em 0.1em 0.25em 0.15em;
        background-color: var(--GW-mode-selector-mobile-background-color);
        opacity: 1.0;
    }
    #reader-mode-selector button {
        color: transparent;
        margin: 0;
        padding: 0;
        width: 2em;
        height: 2em;
        align-items: center;
        box-shadow: none;
        opacity: 0.25;
    }
    #reader-mode-selector button.select-mode-off {
        opacity: 0.3;
    }
    #reader-mode-selector  button + button {
        margin-top: 0.5em;
    }
    #reader-mode-selector button::before {
        left: 12.5%;
        width: 75%;
        height: 75%;
    }
    #reader-mode-selector button:not(:disabled):hover {
        color: transparent;
    }
    #reader-mode-selector button:hover,
    #reader-mode-selector button.selected {
        opacity: 0.75;
    }
    #reader-mode-selector button.select-mode-on:hover,
    #reader-mode-selector button.select-mode-on.selected {
        opacity: 0.55;
    }
    #reader-mode-selector button.select-mode-off:hover,
    #reader-mode-selector button.select-mode-off.selected {
        opacity: 0.85;
    }
}
@media only screen and (max-width: 649px) {
    #reader-mode-selector {
        top: unset;
        bottom: 11em;
    }
    #reader-mode-selector button[class^='select-mode-'] {
        width: 2.25em;
        height: 2.25em;
    }
}