/* Serif: Source Serif */
@import url(/_assets/fonts/source-serif-release/source-serif-caption.css);
@import url(/_assets/fonts/source-serif-release/source-serif-variable.css);
@import url(/_assets/fonts/source-serif-release/source-serif-display.css);
@import url(/_assets/fonts/source-serif-release/source-serif-smtext.css);
@import url(/_assets/fonts/source-serif-release/source-serif-subhead.css);
@import url(/_assets/fonts/source-serif-release/source-serif-text.css);

/* Sans: Inter Variable */
@import url(/_assets/fonts/inter/inter.css);

/* Mono: Inconsolata */
@import url(/_assets/fonts/inconsolata/inconsolata.css);

:root[color-mode="light"] {
    color-scheme: light;

    /* COLORS */
    /* light */

    /* graysccale */
    --color-background: #fff;
    /* --color-lightergray: #f6f6f7;
    --color-lightgray: #ededf4;
    --color-midgray: #d1d1dc;
    --color-darkgray: #a6a6c5;
    --color-darkergray: #6f6f83;
    --color-text: #2e2e33; */

    /* playground color palette */
    /* color */
    --color-lightergray: #fbfbff;
    --color-lightgray: #ecedfb;
    --color-midgray: #dcddea;
    --color-darkgray: #acadb9;
    --color-darkergray: #616270;
    --color-text: #1d1f37;

    /* playground color palette */

    /* color */
    --color-main-lightest: #f0f5ff;
    --color-main-100: #bfd7ff;
    --color-main-light: #8eb7ff;
    --color-main-300: #5c96ff;
    --color-main-400: #3a76e5;
    --color-main: #1c58c6;
    --color-main-600: #0044b8;
    --color-main-700: #00338e;
    --color-main-800: #002264;
    --color-main-900: #001342;

    /* plotting - qualitative */
    /* blue */
    --color-blue-50: #edf7ff;
    --color-blue-100: #bae0ff;
    --color-blue-200: #84c8ff;
    --color-blue-300: #52aff4;
    --color-blue-400: #3695d9;
    --color-blue-500: #057cc0;
    --color-blue-600: #0067a1;
    --color-blue-700: #004b78;
    --color-blue-800: #00304f;
    --color-blue-900: #001a2e;

    /* red */
    --color-red-50: #fff1f1;
    --color-red-100: #ffcac8;
    --color-red-200: #ffa09e;
    --color-red-300: #ff6f72;
    --color-red-400: #e64d55;
    --color-red-500: #c92c3c;
    --color-red-600: #b20028;
    --color-red-700: #85001b;
    --color-red-800: #5a000f;
    --color-red-900: #360006;

    /* yellow */
    --color-yellow-50: #fff3e3;
    --color-yellow-100: #ffe5c0;
    --color-yellow-200: #ffd79a;
    --color-yellow-300: #ffc76f;
    --color-yellow-400: #ffb733;
    --color-yellow-500: #f5ab03;
    --color-yellow-600: #c68a00;
    --color-yellow-700: #8b5f00;
    --color-yellow-800: #513600;
    --color-yellow-900: #231500;


    /* green */
    --color-green-50: #ddffea;
    --color-green-100: #7effb9;
    --color-green-200: #68eaa5;
    --color-green-300: #51d592;
    --color-green-400: #37c07f;
    --color-green-500: #01ad6b;
    --color-green-600: #008e57;
    --color-green-700: #00663d;
    --color-green-800: #003f24;
    --color-green-900: #001f0f;

    /* purple */
    --color-purple-50: #f7f3ff;
    --color-purple-100: #dfcaff;
    --color-purple-200: #c8a0ff;
    --color-purple-300: #b372ff;
    --color-purple-400: #9c42f1;
    --color-purple-500: #8010d1;
    --color-purple-600: #6d00b5;
    --color-purple-700: #53008b;
    --color-purple-800: #390062;
    --color-purple-900: #230040;

    /* orange */
    --color-orange-50: #fff2ed;
    --color-orange-100: #ffd6c5;
    --color-orange-200: #ffb99b;
    --color-orange-300: #ff9a6d;
    --color-orange-400: #f97b3e;
    --color-orange-500: #e46521;
    --color-orange-600: #c14d00;
    --color-orange-700: #8c3600;
    --color-orange-800: #581f00;
    --color-orange-900: #2e0c00;

    /* rose */
    --color-rose-50: #fff1f5;
    --color-rose-100: #ffd4e0;
    --color-rose-200: #ffb6cc;
    --color-rose-300: #ff96b8;
    --color-rose-400: #ff71a4;
    --color-rose-500: #f05591;
    --color-rose-600: #d81d75;
    --color-rose-700: #9f0053;
    --color-rose-800: #640031;
    --color-rose-900: #340017;

    /* plotting - sequential */
    --color-sequential-01: #0069b1;
    --color-sequential-02: #1a79b1;
    --color-sequential-03: #3387b1;
    --color-sequential-04: #4b95b2;
    --color-sequential-05: #62a3b2;
    --color-sequential-06: #79b0b2;
    --color-sequential-07: #8fbdb2;
    --color-sequential-08: #a6cbb2;
    --color-sequential-09: #bcd8b2;
    --color-sequential-10: #d2e5b3;
    --color-sequential-11: #e9f2b3;
    --color-sequential-12: #ffffb3;

    /* shadows */
    --shadow-small: 0px 0px 5px var(--color-midgray);
    --shadow-sidebar: -30px 0px 50px var(--color-darkergray);
}

:root[color-mode="dark"] {
    color-scheme: dark;

    /* COLORS */
    /* grayscale */
    /* --color-background: #0d1117;
    --color-lightergray: #010409;
    --color-lightgray: #101621;
    --color-midgray: #1f242b;
    --color-darkgray: #374963;
    --color-darkergray: #a6a6c5;
    --color-text: #d5d8e5; */

    /* color */
    --color-text: #dcdde8;
    --color-darkergray: #989db8;
    --color-darkgray: #5e617a;
    --color-midgray: #2e3147;
    /* --color-lightgray: #202235; */
    --color-lightgray: #1f1f24;
    --color-background: #1f1f24;
    --color-lightergray: #131318;

    /* playground color palette */

    /* color */
    --color-main-50: #f0f5ff;
    --color-main-100: #bfd7ff;
    --color-main-200: #8eb7ff;
    --color-main-300: #5c96ff;
    --color-main: #3a76e5;
    --color-main-500: #1c58c6;
    --color-main-600: #0044b8;
    --color-main-700: #00338e;
    --color-main-light: #181c23;
    --color-main-lightest: #181c23;
    
    /* plotting - qualitative */
    --color-qualitative-blue: #13A3F6;
    --color-qualitative-red: #EF5262;
    --color-qualitative-yellow: #FFBC1F;
    --color-qualitative-green: #00F597;
    --color-qualitative-purple: #B654FC;
    --color-qualitative-orange: #FE8848;

    /* shadows */
    --shadow-small: 0px 0px 0px transparent;
    --shadow-sidebar: 0px 0px 0px transparent;
}

:root {

    /* SCALE */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 24px;
    --space-ml: 32px;
    --space-l: 48px;
    --space-xl: 64px;
    --space-h: 92px;
    --space-xh: 128px;
    /* --space-xs: .333rem;
    --space-s: .5rem;
    --space-m: 1rem;
    --space-ml: 1.333rem;
    --space-l: 2rem;
    --space-xl: 2.667rem;
    --space-h: 3.833rem;
    --space-xh: 5.333rem; */

    /* RELATIVE SPACING */
    --space-nav-top-bot: .4em;

    /* TYPE SCALE */
    --base-font-size: 17px;
    --scale-inter-to-source-serif: .5;
    --scale-inconsolata-to-source-serif: .43;

    --font-size-xs: .65rem;
    --font-size-s: .8125rem;
    --font-size-ms: .95rem;
    --font-size-m: 1rem;
    --font-size-ml: 1.1rem;
    --font-size-l: 1.375rem;
    --font-size-section: 1.75rem;
    --font-size-chapter: 2.25rem;
    --font-size-hero-title: 4rem;
    /* --font-size-humongous: 3rem; */

    /* LINE HEIGHTS */
    --base-line-height: 165%;
    --note-line-height: 135%;
    --title-line-height: 135%;
    --table-line-height: 120%;
    --table-header-line-height: 110%;


    /* FONTS */
    --serif: 'Source Serif VF', 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
    --sans: 'InterVariable', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --mono: 'Inconsolata', Consolas, 'Courier New', Courier, monospace;

    /* BORDER RADIUSES */
    --border-radius-square: 2px;
    --border-radius-xs: 4px;
    --border-radius-s: 6px;

    /* CONSTANTS */
    /* --sidebar-width: 320px; */
    --sidebar-width: max(320px, calc(50vw - 450px));
    /* --section-width: calc(.6 * 100vw - var(--sidebar-width)); */
    --section-width: 700px;
    --sidebar-margin-right: var(--space-xl);
    --content-margin-left: var(--space-h);
    --note-sep: var(--space-h);
    --content-margin-top: var(--space-l);

    /* CALCULATED WIDTHS */
    --sidebar-margin-left: calc(50vw - 800px);
    --content-margin-right: calc(50vw - 800px);
    --note-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - var(--content-margin-right) - var(--content-margin-left) - var(--note-sep) - var(--section-width));
    --title-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - var(--content-margin-right) - var(--content-margin-left));
    --margin-main: var(--sidebar-width);
    --pager-sep: var(--space-s);
    --header-anchor-width: 1em;
    --buttons-thickness: var(--space-ml);

    /* HERO GRID */
    --hero-width: calc(100vw - 2*var(--sidebar-margin-left) - var(--scrollbar-width));
    --hero-grid: repeat(6, 1fr);

    /* BLUR */
    --background-blur: color-mix(in srgb, var(--color-lightergray) 70%, transparent);
}

/* NOTE SYMBOLS */
@counter-style note-symbols {
    system: cyclic;
    symbols: "\204E" "\2051" "\2042" "\2020" "\2021" "\2020\2020" "\2021\2021" "\00A7" "\00A7\00a7" "\007C\007C" "\00B6";
    suffix: "";
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-size: var(--base-font-size);
    font-family: var(--serif);
    text-rendering: optimizeLegibility;
    font-variant-numeric: oldstyle-nums;
    /* scrollbar-width: thin; */
    font-optical-sizing: auto;
    scroll-behavior: smooth;
    hyphens: none;
}

body {
    /* gets the wiewport width without the scrollbar */
    width: calc(100vw - (100vw - 100%));
    font-size: 1rem;
    color: var(--color-text);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    transition: color 0.25s, background-color 0.25s;
}
/* HERO-SPECIFIC */

.hero {
    margin-left: var(--sidebar-margin-left);
    margin-right: var(--sidebar-margin-left);
    margin-top: var(--content-margin-top);
    width: var(--hero-width);
    padding-top: 0px;
    width: var(--hero-width);
}

.hero .buttons-top {
    margin-left: 0;
    margin-bottom: 0;
}

.hero .buttons-right {
    background-color: transparent;
}

.hero header {
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
    min-height: calc(1.5*var(--space-xh));
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
    width: auto;
    margin: 0;
    padding: 0;
    font-size-adjust: none;
    line-height: calc(0.8*var(--title-line-height));
}

.hero h1 {
    font-size: var(--font-size-hero-title);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-style: normal;
    font-weight: 700;
    width: calc(66.66%  - var(--space-m)/2);
}

.hero h2 {
    font-size: var(--font-size-l);
    font-weight: bold;
    margin-bottom: var(--space-m);

}

.hero > * {
    margin-bottom: var(--space-xl);
}

.hero .abstract-search {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.hero .abstract-search .abstract {
    display: block;
    width: calc(66.66%  - var(--space-m)/2);
}

.hero .abstract-search .search-cta {
    display: block;
    width: calc(33.33%  - var(--space-m)/2);
}

.hero .abstract-content {
    column-count: 2;
    column-gap: var(--space-m);
}

.hero .abstract-content p {
    break-inside: avoid;
}

.hero .contents {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    border-top: 1px solid var(--color-lightgray);
    border-bottom: 1px solid var(--color-lightgray);
    background-color: var(--color-lightergray);
    margin-left: calc(0px - var(--sidebar-margin-left));
    padding-left: var(--sidebar-margin-left);
    padding-right: var(--sidebar-margin-left);
    width: calc(100vw - var(--scrollbar-width));
}

.hero .contents h2 {
    color: var(--color-darkergray);
}

.hero nav {
    font-size: var(--font-size-ms);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
}

.hero nav > ul {
    display: grid;
    grid-gap: var(--space-m);
    grid-template-columns: var(--hero-grid);
}

.hero nav > ul > li {
    margin-bottom: var(--space-m);
}

.hero nav > ul > li > ul > li > ul {
    display: none;
}

.sidebar {
    position: fixed;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--color-lightergray);
    border-right: 1px solid var(--color-lightgray);
    padding-top: var(--content-margin-top);
    padding-left: var(--sidebar-margin-left);
    padding-right: var(--sidebar-margin-right);
    padding-bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-size: var(--font-size-s);
}

main {
    margin-left: var(--margin-main);
    padding-top: var(--content-margin-top);
    line-height: var(--base-line-height);
    counter-reset: sidenote-counter;
}

.sidebar .header-container, .sidebar .search-container {
    width: calc(var(--sidebar-width) - var(--sidebar-margin-left) - var(--sidebar-margin-right) + 2*var(--space-s));
    margin-left: calc(0px - var(--space-s));
    padding-left: calc(var(--space-s));
    padding-right: calc(var(--space-s));
    margin-bottom: var(--space-m);
    position: fixed;
    background-color: var(--color-lightergray);
}

.sidebar .header-container {
    margin-top: calc(0px - var(--content-margin-top));
    padding-top: calc(var(--content-margin-top));
}

.sidebar .search-container {
    margin-top: var(--space-ml);
}

.sidebar .searchbar {
    border-bottom: 1px solid var(--color-midgray);
}

.search-container {
    width: 100%;
    height: calc(2*var(--space-ml));
}

.searchbar-container {
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    width: calc(100%);
}

.searchbar input {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    height: var(--space-ml);
    width: 100%;
    border-radius: var(--border-radius-s);
    padding: var(--space-xs) var(--space-s);
    padding-right: var(--space-xs);
    background-color: transparent;
    border: 1px solid var(--color-midgray);
    font-size: var(--font-size-s);
    color: var(--color-darkergray);
    z-index: 1;
    transition: border-color 0.25s;
}

.searchbar input:hover {
    border: 1px solid var(--color-main);
}

.searchbar input:focus {
    background-color: var(--color-background);
    border: 2px solid var(--color-main);
    box-shadow: var(--shadow-small);
    color: var(--color-text);
    z-index: 2;
}

.header-container header {
    width: 100%;
    display: flex;
    align-items: center;
    height: var(--space-ml);
}


/* search */

.searchbar {
    height: var(--space-xl);
    display: flex;
    width: 100%;
    align-items: center;
    line-height: 1;
}

.ctrl-k {
    color: var(--color-darkgray);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    width: 0px;
    float: right;
    clear: both;
    margin-left: calc(0px - 80px);
    position: relative;
    user-select: none;
    z-index: 1;
}

kbd {
    background-color:  var(--color-lightgray);
    border-radius: var(--border-radius-xs);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    padding: calc(0.8*var(--space-xxs)) calc(1.5*var(--space-xxs));
    margin: 0px var(--space-xxs);
    font-weight: 500;
}

.searchbar input.typing + .ctrl-k{
    display: none;
}

.results-container.inactive {
    display: none;
}

.results-container {
    width: calc(100% + 2*var(--space-xs));
    margin-left: calc(0px - var(--space-xs));
    border: 1px solid var(--color-midgray);
    clear: both;
    margin-top: calc(0px - 0.5*var(--space-xl) - 0.5*var(--space-ml) - var(--space-xs));
    border-radius: calc(var(--border-radius-s) + var(--space-xs));
    background-color: var(--color-background);
    padding-top: calc(2*var(--space-xs) + var(--space-ml));
    font-size: var(--font-size-s);
    z-index: 0;
    box-shadow: var(--shadow-small);
    overflow-y: hidden;
}

.search-results-list {
    list-style-type: none;
    margin-left: 0px;
    border-top: 1px solid var(--color-midgray);
    margin-bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 1.8*var(--space-xh));
    border-bottom: 1px solid var(--color-midgray);
    color: var(--color-darkergray);
    line-height: var(--note-line-height);
}

.search-results-list .search-info {
    padding: var(--space-xs);
    color: var(--color-darkgray);
    padding-left: var(--space-s);
    font-weight: 500;
    font-style: italic;
    font-size: var(--font-size-s);
}

.search-results-list li a {
    display: block;
    padding: var(--space-s);
    border-bottom: 1px solid var(--color-midgray);
    color: inherit;
    text-decoration: none;
}

.search-results-list li:last-child a {
    border-bottom: none;
}

.search-results-list li a:hover, .search-results-list li.selected {
    background-color: var(--color-lightergray);
    color: var(--color-text);
}

.search-result-path {
    font-weight: 500;
    font-size: var(--font-size-xs);
    color: var(--color-darkergray);
    margin-bottom: var(--space-xxs);
    font-variant-numeric: tabular-nums;
}

.search-result-title {
    font-weight: bold;
    margin-bottom: var(--space-xs);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
}

.search-result-title .search-result-number {
    margin-right: var(--space-xxs);
}

.search-result-title mark, .search-result-content mark {
    font-weight: bold;
    color: var(--color-main);
    background-color: var(--color-main-lightest);
    border-radius: var(--border-radius-xs);
    padding-left: .2em;
    padding-right: .2em;
    margin-left: -.2em;
    margin-right: -.2em;
}

.search-result-title span:last-child {
    width: 100%;
}

.search-results-list .empty {
    color: var(--color-darkergray);
    padding: var(--space-xs) var(--space-s);
    text-align: center;
    font-style: italic;
    border-bottom: 1px solid var(--color-midgray);
    height: 100px;
}

.search-helper {
    font-size: var(--font-size-xs);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    color: var(--color-darkergray);
    align-items: center;
    padding: var(--space-xs) var(--space-s);
    user-select: none;
    position: sticky;
    bottom: 0px;
    line-height: calc(1.2*var(--base-line-height));
    background-color: var(--color-background);
}

.search-helper kbd {
    display: inline;
    border-radius: var(--border-radius-square);
    margin: 0;
    margin-right: var(--space-xxs);
    font-size: calc(0.9*var(--font-size-xs));
    padding: calc(0.5*var(--space-xxs));
}

.search-helper > span {
    margin-right: 1em;
    display: inline-block;
    flex-direction: row;
    align-items: center;
}

/* nav */

.sidebar nav {
    margin-top: calc(3*var(--space-l));
    margin-bottom: var(--space-l);
    width: calc(var(--sidebar-width) - var(--sidebar-margin-left) - var(--sidebar-margin-right));
    overflow-x: visible;
}

nav a {
    color: var(--color-darkergray);
    text-decoration: none;
    padding-top: var(--space-nav-top-bot);
    padding-bottom: var(--space-nav-top-bot);
    border-radius: var(--border-radius-s);
    display: inline-block;
    margin-left: calc(0px - var(--space-s));
    margin-right: calc(0px - var(--space-s));
    padding: var(--space-xxs) var(--space-s);
    display: flex;
    align-items: stretch;
    line-height:  1.2;
    overflow-x: hidden;
}

nav a:hover {
    background-color: var(--color-lightgray);
    color: var(--color-text);
}

.sidebar nav a.current {
    color: var(--color-main);
}

.sidebar nav > ul > li > a.current,
.sidebar nav > ul > li > ul > li > a.current {
    background-color: var(--color-main-lightest);
}

nav a .toc-section-number {
    display: block;
    width: 2em;
    margin-right: var(--space-xs);
    font-variant-numeric: tabular-nums;
    flex-grow: 0;
    flex-shrink: 0;
}

nav ul li ul li ul li a .toc-section-number {
    width: auto;
}

nav ul {
    list-style-type: none;
    margin-left: 0px;
}

nav > ul > li {
    margin-bottom: var(--space-m);
}

nav > ul > li > a {
    font-weight: bold;
}

nav ul > li > ul > li > ul {
    margin-left: calc(1em + 0.5*(var(--space-xs)));
    padding-left: calc(1em + 0.5*(var(--space-xs)));
}

nav ul > li > ul > li > ul > li > a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--color-midgray);
    box-sizing: content-box;
    transition: border-color 0.25s;
}

nav ul > li > ul > li > ul > li > a.current {
    border-left: 2px solid var(--color-main);
    padding-left: calc(var(--space-s) - 1px);
}


.toc-section-number {
    display: inline-block;
}

nav a .expand {
    margin-left: auto;
    align-self: flex-start;
    text-align: right;
    color: var(--color-darkgray);
    border-radius: 50ch;
    height: 100%;
    width: var(--space-m);
}

nav a .expand:hover {
    color: var(--color-darkergray);
}

nav a .expand > * {
    vertical-align: middle;
    margin: 0;
}

/* nav numbers hangin */
/* nav a > .toc-section-number {
    margin-left: calc(0px - var(--space-ml));
    display: inline-block;
    width: var(--space-ml);
} */

footer {
    padding-top: var(--space-ml);
    border-top: 1px solid var(--color-midgray);
    margin-bottom: var(--space-xh);
    color: var(--color-darkgray);
    width: calc(var(--sidebar-width) - var(--sidebar-margin-left) - var(--sidebar-margin-right));
}

.buttons-top {
    margin-left: var(--content-margin-left);
    margin-right: var(--content-margin-right);
    display: flex;
    align-items: center;
    margin-bottom: var(--space-l);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-size: var(--font-size-s);
    font-variant-numeric: tabular-nums;
    display: flex;
    font-size: var(--font-size-s);
    gap: var(--space-s);
    z-index: 2;
}

.buttons-top .buttons-right {
    margin-left: auto;
    position: fixed;
    top: var(--content-margin-top);
    right: calc(var(--content-margin-right) - 2*var(--space-ml));
    flex-direction: column;
    padding: 4px;
    width: var(--buttons-thickness);
    border: none;
    font-size: var(--font-size-ms);
    gap: var(--space-s);
    background-color: transparent;
}

#light-dark-switch, .burger {
    font-size: var(--font-size-m);
}

.buttons-top > * {
    /* border: 1px solid var(--color-lightgray); */
    border-radius: 50ch;
    display: flex;
    padding: 4px;
    background-color: var(--color-lightergray);
    backdrop-filter: blur(8px);
}

.buttons-top .breadcrumbs {
    height: var(--buttons-thickness);
    margin-left: -1.5em;
    padding: 4px 1em;
    overflow-y: auto;
}

.buttons-top .buttons-right > *, .buttons-top .burger > * {
    height: var(--space-ml);
    width: var(--space-ml);
    display: flex;
    padding: 0;
    justify-content: space-around;
}

.buttons-top > * > * {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    text-decoration: none;
    border-radius: 50ch;
    padding: var(--space-xs);
    color: var(--color-darkergray);
}

.buttons-top .separator {
    padding: 0px 2px;
    color: var(--color-midgray);
}

.buttons-top a:hover, .buttons-top button:hover {
    background-color: var(--color-background);
    color: var(--color-text);
}

.breadcrumbs > *:last-child {
    color: var(--color-text);
}

.burger {
    display: none;
}

button {
    background-color: transparent;
}

button:hover {
    /* background-color: var(--color-lightergray); */
    cursor: pointer;
}

main > section,
.bottom {
    margin-left: var(--content-margin-left);
    width: var(--section-width);
}

.bottom {
    margin-top: var(--space-h);
    padding-top: var(--space-m);
    margin-bottom: var(--space-xh);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
}

.prevnext {
    display: flex;
    align-items: stretch;
    gap: var(--space-s);
}

.prevnext .pager {
    height: var(--space-m);
    width: calc(0.5*(100% - var(--space-s)));
    height: auto;
    /* border: 1px solid var(--color-lightergray); */
    background-color: var(--color-lightergray);
    padding: var(--space-xs) var(--space-s) var(--space-s) var(--space-s);
    border-radius: var(--border-radius-s);
    line-height: var(--table-line-height);
    text-decoration: none;
    font-size: var(--font-size-ms);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-darkergray);
}

.prevnext .pager:hover {
    /* border: 1px solid var(--color-main); */
    cursor: pointer;
    color: var(--color-text);
}

.prevnext .next {
    margin-left: auto;
    text-align: right;
}

.prevnext .pager .prefix {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-darkergray);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .05rem;
    margin-bottom: var(--space-xxs);
    transition: color 0.25s;
}

.prevnext .pager:hover .prefix {
    color: var(--color-main);
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-darkgray);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: all;
    text-underline-offset: .15em;
}

a:hover {
    color: var(--color-main);
    text-decoration-color: var(--color-main);
}

a.external::after {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    content: "↗";
    line-height: var(--note-line-height);
    vertical-align: top;
    font-size: var(--font-size-s);
    color: var(--color-darkgray);
    font-weight: normal;
}

a.external:hover::after {
    color: var(--color-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    line-height: var(--title-line-height);
    display: flex;
}

h1 > *,
h2 > *,
h3 > *,
h4 > *,
h5 > *,
h6 > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.header-section-number {
    font-variant-numeric: tabular-nums;
    margin-right: .5em;
}

.header-section-title {
    flex: 1 1 auto;
}

h1 {
    font-size: var(--font-size-chapter);
    margin-bottom: var(--space-xl);
    width: var(--title-width);
    font-weight: 800;
}

h2 {
    font-size: var(--font-size-section);
    font-weight: 500;
    margin-bottom: var(--space-l);
    width: var(--title-width);
}

h3 {
    font-size: var(--font-size-ml);
    /* margin-bottom: var(--space-xxs); */
    margin-bottom: var(--space-m);
    margin-top: var(--space-l);
}

h4 {
    font-weight: 500;
    margin-bottom: var(--space-s);
}

h5, h6 {
    float: left;
    display: block;
    margin: 0;
    font-size: var(--base-font-size);
    position: relative;
    line-height: var(--base-line-height);
    font-family: var(--serif);
    font-weight: normal;
    font-size-adjust: none
}

h5 {
    font-style: italic;
}

h5::after {
    font-style: normal;
    content: "\00A0\00A0\00B7\00A0\00A0" ;
}

h6::after {
    font-style: normal;
    content: ".\00A0" ;
}

p {
    margin-bottom: var(--space-m);
    /* text-align: justify; */
}

sup {
    vertical-align: text-top;
    line-height: 1;
}

sub {
    vertical-align: text-bottom;
    line-height: 1;
}

/* inline markup */

del {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* lists */

section ol,
section ul {
    margin-left: var(--space-ml);
    margin-bottom: var(--space-m);
}

ol li::marker {
    color: var(--color-darkgray);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-weight: 500;
}

ul li::marker {
    color: var(--color-darkgray);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
}


section ol > li > :not(li),
section ul > li > :not(li),
section dd > li > :not(li) {
    margin-bottom: var(--space-s);
}

/* blockquotes */

blockquote {
    margin-bottom: var(--space-m);
    border-left: 5px solid var(--color-lightgray);
    padding-left: var(--space-m);
}

/* code */

code {
    font-family: var(--mono);
    font-size-adjust: var(--scale-inconsolata-to-source-serif);
}

:not(pre) > code {
    border-radius: var(--border-radius-xs);
    background-color: var(--color-lightergray);
    border: 1px solid var(--color-lightgray);
    padding: calc(0.5*var(--space-xxs)) var(--space-xxs);
    line-height: inherit;
}

pre {
    border-radius: var(--border-radius-s);
    background-color: var(--color-lightergray);
    border: 1px solid var(--color-lightgray);
    padding: var(--space-s) var(--space-m);
    margin-bottom: var(--space-m);
    line-height: var(--note-line-height);
    overflow-x: auto;
}

pre.numberLines > code > span::before {
    display: inline-block;
    margin-left: calc(0px - 1em);
    content: counter(code-numberlines);
    width: 1.5em;
    margin-right: var(--space-s);
    color: var(--color-darkgray);
    text-align: right;
    font-size: var(--font-size-s);
}

pre > code {
    display: inline-block;
    min-width: calc(100% + var(--space-m));
    padding-right: calc(var(--space-m));
    margin-right: calc(0px - var(--space-m));
}

pre > code > span::before {
    display: inline-block;
    content: "";
}

pre > code > span {
    display: inline-block;
    width: calc(100% + 2*var(--space-m));
    margin-left: calc(0px - var(--space-m));
    margin-right: calc(0px - var(--space-m));
    padding-left: var(--space-m);
    padding-right: calc(var(--space-m));
}

pre > code > span:active {
    background-color: var(--color-lightgray);
}

pre.numberLines > code > span {
    counter-increment: code-numberlines;
}

.code-header {
    border-bottom: 1px solid var(--color-light);
    margin-top: calc(0px - var(--space-s));
    margin-left: calc(0px - var(--space-m));
    margin-right: calc(0px - var(--space-m));
    margin-bottom: var(--space-s);
    padding-left: var(--space-s);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-weight: 500;
    color: var(--color-darkgray);
    height: var(--space-ml);
    display: flex;
    align-items: center;
    font-size: var(--font-size-ms);
    position: sticky;
    left: calc(0px - var(--space-m));
}

.lang-copy-container {
    display: block;
    margin-top: 0px;
    margin-left: calc(0px - var(--space-m));
    margin-right: calc(0px - var(--space-s));
    margin-bottom: calc(0px - var(--space-m));
    position: sticky;
    right: calc(0px - var(--space-s));
    display: flex;
    position: sticky;
    left: calc(0px - var(--space-m));
    pointer-events: none;
    height: var(--space-m);
}

.lang-copy-container .lang-copy {
    border: 1px solid var(--color-lightgray);
    background-color: var(--color-lightgray);
    border-radius: var(--border-radius-xs);
    margin-left: auto;
    clear: right;
    float: right;
    height: 100%;
}

.lang-copy {
    width: fit-content;
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-size: var(--font-size-s);
    font-weight: 500;
    color: var(--color-darkgray);
    display: flex;
    align-items: stretch;
    pointer-events: all;
}

.code-header .lang-copy {
    margin-left: auto;
    height: var(--space-ml);
    border-left: none;
}

.lang-copy .lang {
    display: flex;
    align-items: center;
    padding: 0px var(--space-s);
    border-right: 1px solid var(--color-lightgray);
    user-select: none;
}

.lang-copy .copy {
    padding: 0px var(--space-xs);
    border-top-right-radius: var(--border-radius-xs);
    border-bottom-right-radius: var(--border-radius-xs);
    color: var(--color-darkgray);
}

.lang-copy .copy:hover {
    color: var(--color-text);
}

.lang-copy .copy .bx-check {
    color: var(--color-qualitative-green);
}


/* math */
.katex-display {
    overflow: auto hidden;
}

.katex-display .katex {
    margin-top: 1px;
    margin-bottom: 1px;
}

/* wide elements */

.wide {
    width: var(--title-width);
}

/* header anchors on :hover */

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
h5:hover .heading-anchor,
h6:hover .heading-anchor {
    display: inline-block;
}

.heading-anchor {
    display: none;
    margin-left: calc(0px - var(--header-anchor-width));
    width: var(--header-anchor-width);
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: var(--color-darkgray)
}

/* sidenotes */

.sidenote-wrapper {
    counter-increment: sidenote-counter;
    color: var(--color-darkergray);
}

.sidenote,
figcaption {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    color: var(--color-darkergray);
    float: right;
    clear: right;
    margin-bottom: var(--space-m);
    position: relative;
    left: calc(var(--note-width) + var(--note-sep));
    width: var(--note-width);
    margin-left: calc(0px - var(--note-width) - var(--space-h));
    /* border: 1px solid red; */
    vertical-align: baseline;
    line-height: var(--note-line-height);
    font-size: var(--font-size-s);
    text-align: left;
}

input.margin-toggle {
    display: none;
    /* visibility: hidden; */
}

label.sidenote-number {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    display: inline-block;
    width: 1ex;
}

.sidenote-number {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-size: var(--font-size-s);
    vertical-align: text-top;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sidenote::before {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    /* border: 1px solid blue; */
    content: counter(sidenote-counter, note-symbols);
    text-align: right;
    float: left;
    margin-left: calc(0px - var(--space-m) - var(--space-xs));
    right: calc(var(--space-m));
    width: var(--space-m);
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-s);
}

.sidenote-number::after {
    content: counter(sidenote-counter, note-symbols);
    display: inline-block;
    /* width: 1ex; */
}

.sidenote-wrapper:hover .margin-toggle,
.sidenote-wrapper:hover .sidenote::before {
    color: var(--color-main);
    font-weight: bold;
}

/* figures */

figure,
.table-wrapper {
    margin-top: var(--space-m);
    margin-bottom: var(--space-ml);
}

.captionprefix {
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

figure>img {
    max-width: var(--title-width);
    border-radius: var(--border-radius-xs);
}

figure>svg {
    max-width: var(--title-width);
}

figure>img:not(.margin) {
    margin-left: auto;
    margin-right: 0px;
}

.graph-container {
    display: inline-block;
}

.margin {
    float: right;
    clear: right;
    margin-bottom: var(--space-m);
    position: relative;
    left: calc(var(--note-width) + var(--note-sep));
    width: var(--note-width);
    margin-left: calc(0px - var(--note-width) - var(--space-h));
    vertical-align: baseline;
    line-height: var(--note-line-height);
    font-size: var(--font-size-s);
    text-align: left;
}

img.margin, img.wide {
    margin-bottom: var(--space-s);
}


figcaption p {
    margin: 0;
    padding: 0;
}

/* subfigures */

.subfigures table {
    border: none;
    border-collapse: collapse;
    display: inline-table;
}

.subfigures table tr td {
    padding: 0 var(--space-xs);
    border: none;
}

.subfigures table tr td:first-child {
    padding-left: 0;
}

.subfigures table tr td:last-child {
    padding-right: 0;
}

.subfigures table tr:hover {
    background-color: transparent;
}

.subfigures table td > figure > figcaption {
    float: none;
    clear: none;
    display: inline-block;
    margin-left: 0px;
    width: 100%;
    left: 0px;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-s);
}

.subfigures table tbody tr td {
    padding-bottom: var(--space-m);
}

.subfigures table tbody tr:last-child td {
    padding-bottom: 0;
}

.subfigures table td {
    vertical-align: top;
}

.subfigures table td figure {
    margin: 0;
}

.subfigures.wide {
    padding: 0;
    margin-left: calc(0px - var(--content-margin-left));
    padding-left: var(--content-margin-left);
    padding-top: var(--space-m);
    padding-bottom: var(--space-ml);
    padding-right: var(--content-margin-right);
    background: var(--color-lightergray);
    border-top: 1px solid var(--color-lightgray);
    border-bottom: 1px solid var(--color-lightgray);
    width: calc(var(--content-margin-left) + var(--content-margin-right) + var(--title-width))
}

.subfigures.wide figcaption {
    float: none;
    display: block;
    left: 0;
    margin-left: 0;
    width: 100%;
}

/* tables */

.table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

.table-wrapper table {
    margin-left: 0;
}

table {
    margin-left: auto;
    margin-right: auto  ;
    font-family: var(--sans);
    font-size: var(--font-size-s);
    font-size-adjust: var(--scale-inter-to-source-serif);
    border-top: 2px solid var(--color-midgray);
    border-bottom: 2px solid var(--color-midgray);
    border-collapse: separate;
    border-spacing: 0;
    line-height: var(--table-line-height);
}

table tfoot td {
    border-top: 1px solid var(--color-midgray);
}

table caption {
    max-width: calc(var(--section-width) - var(--scrollbar-width));
    position: sticky;
    left: 0px;
    color: var(--color-darkergray);
    margin-bottom: var(--space-s);
    vertical-align: baseline;
    line-height: var(--note-line-height);
    font-size: var(--font-size-s);
    text-align: left;
}

table td,
table th {
    font-variant-numeric: tabular-nums;
    padding: var(--space-xs) var(--space-s);    
}

table thead th {
    border-bottom: 1px solid var(--color-midgray);
    vertical-align: bottom;
    line-height: var(--table-header-line-height);
    position: sticky;
    color: var(--color-darkergray);
}

table tbody th {
    vertical-align: middle;
    border-right: 1px solid var(--color-darkgray);
}

table tr td {
    border-bottom: 1px solid var(--color-lightgray);
    vertical-align: text-top;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:hover {
    background-color: var(--color-lightergray);
}

/* abbr */

abbr {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--color-darkgray);
    text-underline-offset: .15em;
}

/* definition lists */

dt {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    font-weight: bold;
}

dd {
    margin-left: var(--space-ml);
    margin-bottom: var(--space-m);
}

/* rules (actually  a s t e r i s m s) */

hr {
    margin: var(--space-m) 0px var(--space-ml);
    text-align: center;
    font-size: var(--font-size-l);
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    color: var(--color-darkgray);
}

hr::before {
    content: "* * *";
}

/* citations */

.citation sup {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    color: var(--color-darkergray);
    font-variant-numeric: tabular-nums;
}

/* references */

#refs {
    font-family: var(--sans);
    font-size-adjust: var(--scale-inter-to-source-serif);
    line-height: var(--title-line-height);
}

.csl-entry {
    display: flex;
    margin-bottom: var(--space-ml);
}

.csl-entry > .csl-left-margin {
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--space-ml);
    margin-right: var(--space-s);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-darkergray);
    font-weight: 500;
    align-self: flex-start;
}

.csl-entry > .csl-right-inline {
    font-size: var(--font-size-ms);
}

.csl-entry > .csl-right-inline .csl-block {
    margin-bottom: var(--space-xxs);
    display: block;
}

.csl-entry > .csl-right-inline .csl-right-inline {
    display: inline-block;
}

.csl-entry > .csl-right-inline > .csl-block > strong {
    display: block;
    font-family: var(--serif);
    font-size-adjust: none;
    margin-bottom: var(--space-s);
    font-size: var(--base-font-size);
    color: var(--color-text);
}

.csl-entry > .csl-right-inline > .csl-block:nth-child(4) {
    color: var(--color-darkergray);
    display: flex;
    flex-wrap: wrap;
}

.csl-entry > .csl-right-inline > .csl-block:nth-child(3) {
    color: var(--color-darkergray);
}


.csl-entry > .csl-right-inline > .csl-block:nth-child(3) > .csl-right-inline:nth-child(1) {
    font-variant-numeric: tabular-nums;
}


.csl-entry > .csl-right-inline > .csl-block:nth-child(4) > .csl-block {
    display: flex;
    border: 1px solid var(--color-lightgray);
    background-color: var(--color-lightergray);
    border-radius: var(--border-radius-s);
    padding: 0px var(--space-xs);
    margin-right: var(--space-s);
    font-weight: 500;
    letter-spacing: .05rem;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-s);
    user-select: none;
    color: var(--color-darkgray);
}

.csl-entry > .csl-right-inline > .csl-block:nth-child(4) > .csl-block .smallcaps {
    height: 100%;
    display: inline-block;
    margin-left: var(--space-xxs);
    padding-left: var(--space-xxs);
    border-left: 1px solid var(--color-lightgray);
    font-family: var(--mono);
    font-size-adjust: var(--scale-inconsolata-to-source-serif);
    color: var(--color-darkergray);
    font-size: var(--base-font-size);
    user-select: all;
}


/* MEDIA QUERIES */

/* asymptotic behavior: content centered & width fixed */
@media (max-width: 1950px) {
    :root {
        --hero-grid: repeat(6, 1fr);
    }
}

@media (max-width: 1750px) {
    :root {
        --sidebar-margin-left: var(--space-xl);
        --sidebar-margin-right: var(--space-ml);
        --content-margin-right: var(--space-h);
        --note-sep: var(--space-h);
        /* --sidebar-width: 320px; */
        --section-width: calc(45vw);
    }
}

@media (max-width: 1600px) {
    :root {
        --content-margin-left: var(--space-xl);
        --note-sep: var(--space-xl);
    }
}

@media (max-width: 1350px) {
    :root {
        --content-margin-top: var(--space-s);
        --content-margin-left: var(--space-l);
        --content-margin-right: var(--space-l);
        --sidebar-margin-left: var(--space-ml);
        --note-sep: var(--space-l);
        --sidebar-width: 280px;
        --section-width: calc(45vw);
    }

    .buttons-top .buttons-right {
        right: calc(var(--content-margin-right) - 1.25*var(--space-ml));
    }
}

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 250px;
        --hero-grid: repeat(5, 1fr);
        --base-font-size: 16px;
    }

        
    .hero h1 {
        width: calc(60%  - var(--space-m)/2);;
    }

    .hero .abstract-search .abstract {
        width: calc(80%  - var(--space-m)/2);
    }

    .hero .abstract-search .search-cta {
        width: calc(20%  - var(--space-m)/2);
    }

}

@media (max-width: 1050px) {
    :root {
        --margin-main: 0px;
        --note-width: calc(100vw - var(--scrollbar-width) - var(--content-margin-right) - var(--content-margin-left) - var(--note-sep) - var(--section-width));
        --title-width: calc(100vw - var(--content-margin-left) - var(--content-margin-right));
        --section-width: 60vw;
        --content-margin-top: var(--space-s);

        --sidebar-margin-left: var(--content-margin-left);
        --sidebar-margin-right: var(--content-margin-right);
        --sidebar-width: 400px;
        --hero-grid: repeat(3, 1fr);
    }

    .hero h1 {
        width: 100%;
    }

    .hero header {
        flex-direction: column;
    }

    .hero .abstract-search .abstract {
        width: calc(66.66%  - var(--space-m)/2);
    }
    
    .hero .abstract-search .search-cta {
        width: calc(33.33%  - var(--space-m)/2);
    }

    .hero .abstract-content {
        column-count: 1;
    }


    main {
        /* padding-top: var(--space-h); */
    }

    /* .sidebar {
        visibility: hidden;
    } */

    .sidebar {
        transform: translateX(-110%);
        transition: .4s cubic-bezier(0.05, 0.7, 0.1, 1.0);
        box-shadow: var(--shadow-sidebar);
        z-index: 1;
        /* height: calc(100vh - var(--space-l)); */
        height: 100vh;
        padding-top: var(--space-l);
        font-size: var(--font-size-m);
    }

    .header-container {
        margin-bottom: 0px;
        position: relative;
    }

    .searchbar-container {
        margin-bottom: var(--space-m);
        margin-top: 0px;
        position: sticky;
        top: 100px;
    }

    .searchbar input, .results-container {
        font-size: var(--font-size-m);
    }

    nav {
        margin-top: 0px;
    }

    .show {
        transform: translateY(0);
    }

    .buttons-top {
        width: var(--title-width);
        position: sticky;
        top: var(--content-margin-top);
    }

    .buttons-top > * {
        background-color: var(--background-blur);
    }

    .buttons-top .buttons-right {
        position: relative;
        flex-direction: row;
        right: 0px;
        top: 0px;
        gap: 3px;
        background-color: var(--background-blur);
    }

    .buttons-top .buttons-right > *, .buttons-top .burger > * {
        height: calc(var(--buttons-thickness) - 6px);
        width: calc(var(--buttons-thickness) - 6px);
    }

    .sidenote::before {
        margin-left: calc(0px - var(--space-m) - var(--space-xxs));
    }

    .buttons-top > .buttons-right {
        width: auto;
        height: var(--buttons-thickness);
    }

    .burger {
        display: block;
    }

    .buttons-top .breadcrumbs {
        margin-left: 0;
    }
}


@media (max-width: 850px) {
    :root {
        --content-margin-left: var(--space-m);
        --content-margin-right: var(--space-m);
        --note-sep: var(--space-m);
        --hero-grid: repeat(3, 1fr);
    }

    .bottom {
        width: var(--title-width);
    }
}

@media (max-width: 650px) {
    :root {
        --margin-main: 0px;
        --note-width: calc(100vw - var(--scrollbar-width) - var(--content-margin-right) - var(--content-margin-left) - var(--note-sep) - var(--section-width));
        --title-width: calc(100vw - var(--content-margin-left) - var(--content-margin-right));
        --section-width: var(--title-width);

        --content-margin-left: var(--space-ml);
        --content-margin-right: var(--space-ml);
        --hero-grid: repeat(2, 1fr);
    }

    .hero h1 {
        margin-top: var(--space-h);
    }

    .hero .abstract-search {
        flex-direction: column;
    }

    .hero .abstract-search .abstract {
        width: calc(100%);
    }

    .hero .abstract-search .search-cta {
        width: calc(100%);
    }

    figure>img, figure>svg {
        margin-bottom: var(--space-s);
    }

    figcaption,
    .margin {
        display: block;
        float: none;
        width: var(--section-width);
        margin: 0px;
    }

    figure.subfigures > figcaption {
        margin-bottom: var(--space-m);
    }

    .sidenote,
    .marginnote {
        display: block;
        float: none;
        width: var(--section-width);
        margin: 0px;
        padding-left: var(--space-ml);
    }

    .sidenote-wrapper:hover .margin-toggle,
    .sidenote-wrapper:hover .sidenote::before {
        color: var(--color-darkergray); 
        font-weight: normal;
    }

    label.sidenote-number {
        height: 1.3rem;
        width: auto;
        margin: 0 var(--space-xxs);
        background-color: var(--color-lightergray);
        border: 1px solid var(--color-midgray);
        border-radius: var(--border-radius-s);
        align-items: center;
        display: inline-block;
        padding: 0px var(--space-xxs);
    }

    label.sidenote-number::after {
        display: inline-block;
        margin: auto;
        width: fit-content;
        height: fit-content;
        vertical-align: middle;
    }

    .margin-toggle:hover {
        color: var(--color-main);
        font-weight: bold;
        cursor: pointer;
        border: 1px solid var(--color-main);
    }

    /* sidenote toggle mechanism */

    .sidenote,
    .marginnote {
        display: none;
        margin-top: var(--space-xxs);
        margin-bottom: var(--space-s);
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .sidenote {
      display: block;
      position: relative;
    }

    /*  */
    
    section > pre,
    section > div.sourceCode > pre,
    section > figure > img:not(.margin),
    section > figure > img.margin {
        border-radius: 0px;
        margin-left: calc(0px - var(--content-margin-left));
        width: 100vw !important;
        max-width: none;
        border-left: none;
        border-right: none;
    }

    pre {
        padding-left: var(--content-margin-left);
        padding-right: var(--content-margin-right);
    }

    section > div > .table-wrapper, section > .table-wrapper {
        width: 100vw;
        max-width: none;
        margin-left: calc(0px - var(--content-margin-left));
    }

    table {
        min-width: 100%;
    }

    table tr > *:first-child {
        padding-left: var(--content-margin-left);
    }

    table tr > *:last-child {
        padding-right: var(--content-margin-right);
    }

    caption {
        padding: 0px var(--content-margin-left);
        width: 100vw;
    }
}

@media (max-width: 550px) {
    :root {
        --content-margin-left: var(--space-m);
        --content-margin-right: var(--space-m);
    }

    .hero nav ul {
        display: block;
    }
    
    .bottom .prevnext {
        flex-direction: column;
    }

    .pager.prev, .pager.next {
        width: var(--section-width);
    }
}

@media (max-width: 450px) {
    :root {
        --sidebar-width: 100vw;
    }

    .buttons-top {
        margin-bottom: var(--space-m);
    }
}

@media (max-width: 400px) {
    :root {
        --content-margin-left: var(--space-s);
        --content-margin-right: var(--space-s);
    }
}

@media (max-width: 300px) {
    h1,
    h2,
    h3 {
        display: block;
    }

    .breadcrumbs {
        display: none;
    }
}

@media (hover: none) {
    .buttons-top a:hover, .buttons-top button:hover {
        color: var(--color-darkergray);
    }

    .ctrl-k, .search-helper {
        display: none;
    }
    
    .heading-anchor {
        display: none;
    }
}