/*--------------------------------+
 | Site: The Naturalist's Library |
 +--------------------------------*/

/* Imports
==================================================*/
@import url(https://use.typekit.net/ipu7xev.css);
@import url(https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,400;0,500;1,400;1,500&family=Alegreya+Sans:ital,wght@0,400;0,500;1,400;1,500&display=swap);
@import url(/styles/fontawesome6/fontawesome.css);
@import url(/styles/fontawesome6/light.css);
@import url(/styles/fontawesome6/solid.css);
@import url(/styles/reset.css);


/* Fonts
==================================================*/
body,
#book-reader *,
.dt-input,
.dt-input::placeholder,
h2 em, h2 .littlefoot,
h3 em, h3 .littlefoot,
h4 em, h4 .littlefoot,
h5 em, h5 .littlefoot,
h6 em, h6 .littlefoot {
    font-family: "Alegreya Sans", serif;
}

h2 { font-family: rig-solid-bold-reverse, sans-serif; }
h3, h4, h5, h6, .hero-vol-subtitle, .plate-details h1, .plate-title, .poster-details h1, .stats-num, .vols-num { font-family: rig-solid-bold-inline-solo, sans-serif; }
.hero-vol-media-title, .scaps { font-family: "Alegreya Sans SC", serif; }
.logo { font-family: rig-solid-bold-inline-solo, sans-serif; }


/* Basics
==================================================*/
:root {
    /* Colors */
    --accent: #dd6523;
    --bg-accent: #73976a;
    --bg-accent-dark: #495945;
    --bg-main: #f2efe9;
    --bg-light: #f8f7f5;
    --border: rgba(0, 0, 0, 0.2);
    --contrast-main: #000;
    --contrast-dark: #fff;
    
    /* Fonts */
    --font-scale: 1.25;
    --font-xsmall: calc(var(--font-base) * 0.7);
    --font-small: calc(var(--font-base) * 0.9);
    --font-base: 22px;
    --font-medium: calc(var(--font-base) * pow(var(--font-scale), 2));
    --font-large: calc(var(--font-base) * pow(var(--font-scale), 3));
    --font-xlarge: calc(var(--font-base) * pow(var(--font-scale), 5));
    --font-xxlarge: calc(var(--font-base) * pow(var(--font-scale), 6));
    
    /* Layout */
    --grid: 9fr 5fr 3fr 9fr 1fr 7fr 7fr 1fr 9fr 3fr 5fr 9fr;
    --grid-gap: 2rem;
    --padding-block: 6vw;
    --padding-inline: 2rem;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1em; }
a:hover { text-decoration: none; }

aside {
    border: 1px solid var(--accent);
    border-width: 1px 1px;
    margin: 1.5em 0;
    padding: 1.5em 1.5em 1.3em;
}

aside > p:last-child { margin: 0; }

blockquote {
    border-inline-start: 1px solid var(--border);
    margin: 1em 0;
    padding-inline-start: 1.5rem;
}

body {
    background-color: var(--bg-main);
    background-image: url(/images/naturalists-library/paper.jpg);
    font-optical-sizing: auto;
    color: var(--contrast-main);
    line-height: 1.6;
    scroll-behavior: smooth;
}

caption { text-align: center; margin-block-end: 0.5em; }
cite, em { font-style: italic; }
dd, dl, ol, p, ul { margin-block-end: 1em; }
del { opacity: 0.5; }
details[open] summary::before { transform: rotate(90deg); }
figure { margin: 2rem 0; }
figcaption { text-align: center; }
figcaption p { margin-block-end: 0.25em; }
html { -webkit-tap-highlight-color: transparent; }

h1 {
    color: var(--bg-accent);
    font-family: rig-solid-bold-fill, sans-serif;
    font-size: var(--font-xxlarge);
    font-weight: bold;
    line-height: 1;
    margin-block-end: 0.3em;
    position: relative;
}

h1::after, h1::before {
    block-size: 100%;
    content: attr(data-text);
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    position: absolute;
}

h1::after { color: var(--contrast-dark); font-family: rig-solid-bold-inline, sans-serif; z-index: 2; }
h1::before { color: var(--bg-accent-dark); font-family: rig-solid-bold-halftone, sans-serif; z-index: 1; }
h2 { font-size: var(--font-xlarge); line-height: 0.9; margin: 1.5em 0 0.5em; }
h2, h3, h4, h5, h6 { color: var(--accent); }
h2 em, h3 em, h4 em, h5 em, h6 em { font-size: var(--font-base); }
h3 { font-size: var(--font-large); line-height: 1.1; margin: 1.5em 0 0.5em; }
h4 { font-size: var(--font-medium); font-weight: bold; line-height: 1.1; margin: 1.5em 0 0.5em; }
h5, h6 { line-height: 1.2em; }
h2:first-child, h3:first-child { margin-block-start: 0; }
hr { background: var(--border); border: 0; clear: both; color: var(--border); height: 1px; margin: 2rem 0; }
html { font-size: var(--font-base); }
img { max-inline-size: 100%; }
ins { border-block-end: 1px dashed var(--border); text-decoration: none; }
li > p { margin: 0.5em 0; }
ol { list-style: decimal; padding-left: 2em; }
ol ol, ol ul, ul ol, ul ul { margin-block-end: 0; }
ol ul, ul ul { list-style-type: circle; }

section {
    align-items: start;
    border-block-end: 1px solid var(--border);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid);
    min-height: 1px;
    padding: var(--padding-block) var(--padding-inline);
    position: relative;
}

strong { font-weight: bold; }
sup { font-size: calc(1em / var(--font-scale)); line-height: 0.9; padding-inline-start: 0.1em; vertical-align: super; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

summary::before {
    content: "\203A";
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
    margin-inline-end: 0.2em;
    transition: transform 0.2s;
}

svg { block-size: 100%; inline-size: 100%; }
table { border-collapse: collapse; inline-size: 100%; margin: 1rem 0 2rem; }
td { border: 1px solid var(--border); vertical-align: middle; }
td p { margin: 0; }
td, th { line-height: 1.3; padding: 0.3em 1em 0.1em; }
th { text-align: center; vertical-align: bottom; }
ul { list-style: disc; margin-inline-start: 1.5em; }

/* Content
==================================================*/

/* Actions */
.action {
    background: var(--accent);
    color: var(--contrast-dark);
    border: 2px solid var(--accent);
    display: inline-block;
    letter-spacing: 0.07em;
    line-height: 1;
    padding: 0.65em 1em 0.6em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.1s ease-in-out;
}

.action:hover { background: var(--bg-light); border-color: var(--contrast-main); color: var(--contrast-main); }

.action.dark { background: var(--contrast-dark); border-color: var(--contrast-dark); color: var(--contrast-main); }
.action.dark:hover { opacity: 0.7; }
.action-icon { padding: 0.6em 0.7em; }
.action-secondary { background: none; border: 2px solid var(--contrast-dark); }
.action-secondary.dark { background: none; color: var(--contrast-dark); }

/* Arrangements */
.arrangement {
    border-block-start: 1px dashed var(--border);
    font-size: var(--font-small);
    line-height: 1.3;
    list-style: none;
    margin: 0 0 2em;
    padding: 0.3em 0 0;
}

.arrangement li { margin-block-end: 0.3em; padding-block-end: 0.3em; }

.arrangement > li {
    border-block-end: 1px dashed var(--border);
    column-gap: 1em;
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.arrangement p { margin: 0; }
.arrangement ol { list-style: none; margin: 0; padding: 0; }
.arrangement li li { border-block-end: 1px dashed var(--border); }
.arrangement li li:last-child { border: 0; margin: 0; padding: 0; }

/* Backgrounds */
.bgl, .bgr {
    grid-row: 1;
    inset-block: 0;
    justify-self: stretch;
    mix-blend-mode: multiply;
    object-fit: cover;
    position: sticky;
}

.bgl {
    grid-column: 1 / span 2;
    object-position: 100% 50%;
    transform: translateX(calc(var(--padding-inline) * -1));
}

.bgr {
    grid-column: -3 / span 2;
    object-position: 0 50%;
    transform: translateX(var(--padding-inline));
}

/* Bibliography */
.bib p { margin: 0; }

.bib td {
    border: 1px solid var(--border);
    border-width: 1px 0;
    padding: 0.5em 1em 0.5em 0;
    vertical-align: top;
}

.bib th { cursor: pointer; padding: 0; text-align: left; }
.bib th:hover { background: var(--bg-light-emphasis); }
.bib-byline { font-size: var(--font-small); font-style: italic; margin: 0.1rem 0; }
.bib-plates { font-size: var(--font-small); margin: 0.3em 0 0; }
.bib-plates a { block-size: 100%; display: block; inline-size: 100%; }
.bib-plates a:hover img { border-color: var(--contrast-main); }

.bib-plates img {
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    display: block;
    inline-size: 100%;
    mix-blend-mode: multiply;
    object-fit: contain;
    object-position: 50% 50%;
    padding: 0.1em;
}

.bib-plates li { aspect-ratio: 1 / 1; margin: 0; }
.bib-plates p { display: inline; margin-inline-end: 0.3em; }

.bib-plates ul {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    list-style: none;
    margin: 0.3em 0 0;
}

.bib-title { font-size: var(--font-medium); line-height: 1.1; }

/* Blocks */
.block-full { grid-column: 1 / -1;}
.block-half { align-self: center; grid-column: 2 / span 5; }
.block-narrow { grid-column: 4 / -4; }
.block-wide { grid-column: 2 / -2; }

/* Book */
    /* Features */
    .book-feature { align-items: center; display: grid; grid-template-columns: var(--grid); }
    .book-feature img { display: block; inline-size: 100%; }
    .book-feature-primary { grid-column: 7 / -1; grid-row: 1; }
    .book-feature-secondary { grid-column: 2 / 6; grid-row: 1; }
    .book-feature.flipped .book-feature-primary { grid-column: 1 / 7; grid-row: 1; }
    .book-feature.flipped .book-feature-secondary { grid-column: 7 / -2; grid-row: 1; }
    
    /* Order */
    .book-order { background: var(--bg-accent-dark); color: var(--contrast-dark); text-align: center; }
    .book-order h2 { color: var(--contrast-dark); }
    
    /* Promo */
    .book-promo { background: var(--bg-accent-dark); }
    .book-promo :not(.book-promo-bg) { z-index: 2; }
    .book-promo .block-wide { align-items: center; display: flex; }
    .book-promo, .book-promo h2 { color: var(--contrast-dark); }
    
    .book-promo-bg {
        block-size: 100%;
        display: block;
        filter: invert(1);
        inline-size: 100%;
        inset-block-start: 0;
        left: 0;
        mix-blend-mode: multiply;
        object-fit: cover;
        opacity: 0.1;
        position: absolute;
        z-index: 1;
    }
    
    .book-promo-primary { flex: 0 0 auto; inline-size: 50%; padding: 0 2rem 0 0; }
    .book-promo-secondary { display: block; flex: 0 0 auto; inline-size: 50%; }
    
    .book-promo-secondary img {
        block-size: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 50%;
    }

/* Characteristics */
.chars {
    font-size: var(--font-small);
    line-height: 1.4;
    padding-inline-start: 1.5em;
    text-indent: -1.5em;
}

.chars * { text-indent: 0; }

/* Collage */
.collage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.collage a {
    background: var(--bg-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: var(--contrast-main); display: block;
    font-size: var(--font-small);
    padding: 0.25em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.collage a:hover { transform: scale(1.1); }
.collage img { display: block; height: 8em; mix-blend-mode: multiply; }
.collage-title { display: block; }

/* DataTables */
.dt-search label { display: none; }

.dt-search .dt-input {
    display: block;
    font-size: var(--font-base);
    inline-size: 100%;
    margin-block-end: 1em;
    padding: 0.3em;
}

/* Divisions */
.divisions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    list-style: none;
    margin: 0 0 1rem;
    overflow-x: auto;
    padding: 0 0 1rem;
}

.divisions button {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-light);
    border: 0;
    border-radius: 0;
    color: var(--accent);
    font-size: var(--font-small);
    letter-spacing: 0.07em;
    line-height: 1;
    padding: 1em 0.9em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    white-space: nowrap;
}

.divisions button:hover {
    background: var(--accent);
    color: var(--contrast-dark);
    cursor: pointer;
}

.divisions button.current {
    background: var(--accent);
    color: var(--contrast-dark);
}

/* Editions */
.editions {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(5, 1fr);
    line-height: 1.2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.editions img {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    left: 0;
    object-fit: contain;
    padding: 1rem;
    position: absolute;
}

.editions-thumb {
    background: var(--bg-light);
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    display: block;
    margin-block-end: 1rem;
    padding-block-start: 130%;
    position: relative;
}

.editions-title { display: block; margin-block-end: 0.1rem; }
.editions-date { font-size: var(--font-medium); }
.editions p { font-size: var(--font-small); }

/* Fancybox */
.f-panzoom__viewport { background: var(--bg-main); }
.f-panzoom__viewport > .f-panzoom__content { mix-blend-mode: multiply; padding: 1rem; }

/* Filters */
.filters {
    background: var(--bg-light);
    box-shadow: 1rem 1rem 0 rgba(0, 0, 0, 0.1);
    display: none;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    margin-block-end: 2rem;
    padding: 2rem 4rem 2rem 2rem;
    position: relative;
}

.filters p { margin: 0; }
.filters.open { display: block; }

.filters-close {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    color: var(--contrast-main);
    cursor: pointer;
    font-size: var(--font-medium);
    inset-block-start: 1.4rem;
    inset-inline-end: 2rem;
    line-height: 1;
    padding: 0.35em 0.5em 0.3em;
    position: absolute;
    transition: all 0.1s ease-in-out;
}

.filters-close:hover { border-color: var(--accent); color: var(--accent); }
.filters-list { display: flex; margin-block-end: 1rem; }
.filters-list a { text-decoration: none; }
.filters-list a:hover { text-decoration: underline; }
.filters-list .filters-cols { column-count: 4; column-gap: var(--grid-gap); display: block; }
.filters-list .filters-cols li::after { content: ""; margin-inline-end: 0; }
.filters-list li { margin-inline-end: 0.3em; }
.filters-list li::after { content: ","; }
.filters-list li:last-child::after { content: ""; margin-inline-end: 0; }
.filters-list p { margin-inline-end: 1em; }
.filters-list ul { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; list-style: none; margin: 0; }
.filters-tools { margin-block-end: 1rem; text-align: center; }

    /* Applied */
    .filters-applied { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; }
    .filters-applied a { text-decoration: none; }
    .filters-applied li { border: 1px solid var(--accent); padding: 0.5em 0.8em 0.2em; }
    .filters-applied .filters-applied-clear { border: 0; }
    .filters-applied .filters-applied-clear a { border: 1px solid transparent; }
    .filters-applied .filters-applied-clear a:hover { text-decoration: underline; }
    
    .filters-applied-remove {
        display: inline-block;
        line-height: 1;
        margin-inline-start: 0.5em;
        padding: 0.2em 0.3em 0em;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .filters-applied-remove:hover { background: var(--bg-main); }

/* Figures */
.fig-banner { margin: 0; }
.fig-banner img { display: block; inline-size: 100%; }
.fig-legend { font-size: var(--font-small); }
.fig-link { display: inline-block; max-height: 80vh; width: 100%; }

    /* Actions */
    .fig-actions {
        display: flex;
        font-size: var(--font-small);
        gap: 1rem;
        justify-content: center;
        list-style: none;
        margin: 0;
    }
    
    .fig-actions a { text-decoration: none; }
    .fig-actions a:hover { text-decoration: underline; }
    
    /* Inline */
    .fig-inline { margin: 2rem 0; text-align: center; }
    .fig-inline a { display: inline-block; }
    
    .fig-inline img {
        display: inline-block;
        height: auto;
        margin: 0 auto 1rem;
        max-height: 80vh;
        mix-blend-mode: multiply;
        width: auto;
    }
    
    .fig-inline.small { margin: 2rem auto; max-width: 20rem; }
    .fig-inline.small .fig-link { width: auto; }
    
    /* Narrow */
    .fig-narrow {
        /*background: var(--bg-main);*/
        grid-column: 7 / -2;
        grid-row: 1;
        margin: 0;
        mix-blend-mode: multiply;
        position: sticky;
        text-align: center;
        top: 1rem;
    }
    
    .fig-narrow img {
        display: block;
        height: auto;
        margin: 0 auto 0.5rem;
        max-height: 80vh;
        mix-blend-mode: multiply;
        width: auto;
    }
    
    .fig-narrow .fig-narrow { margin-block-end: 2rem; position: static; }
    
    /* Wide */
    .fig-wide {
        /*background: var(--bg-main);*/
        grid-column: 2 / -2;
        margin: 0 0 0.5rem;
        mix-blend-mode: multiply;
        text-align: center;
    }
    
    .fig-wide img {
        display: block;
        height: auto;
        margin: 0 auto 1.5rem;
        max-height: 80vh;
        mix-blend-mode: multiply;
        width: auto;
    }
    
    .fig-wide .fig-narrow { position: static; }
    .fig-wide .fig-narrow, .fig-wide .fig-wide { margin: 0 0 2rem; }

/* Footer */
    /* Colophon */
    .colophon {
        display: flex;
        justify-content: space-between;
        padding: 1rem var(--padding-inline);
    }
    
    .colophon p { margin: 0; }

    /* Footnotes */
    .footnotes { font-size: var(--font-small); line-height: 1.55; }
    .footnotes li { margin-block-end: 0.5em; }
    .footnotes > .block-wide > ol { column-count: 3; column-gap: 4rem; }
    .footnotes .ref-jump { margin-inline-start: 0.3em; text-decoration: none; }
    .footnotes .ref-jump:hover { text-decoration: underline; }
    
        /* Littlefoot */
        .is-scrollable .littlefoot__content::after { left: 7px; }
        sup.littlefoot--print { display: inline-block; inline-size: 0; visibility: hidden; }
        
        .littlefoot__button {
            background: none;
            border-radius: 0;
            color: var(--accent);
            font-size: calc(1em / var(--font-scale));
            font-family: inherit;
            line-height: 0.9;
            padding: 0 0 0 0.1em;
            text-decoration: underline;
            vertical-align: super;
        }
        
        h2 .littlefoot__button,
        h3 .littlefoot__button,
        h4 .littlefoot__button,
        h5 .littlefoot__button,
        h6 .littlefoot__button {
            font-size: 1rem;
        }
        
        .littlefoot__button.is-active,
        .littlefoot__button:active,
        .littlefoot__button:focus,
        .littlefoot__button:hover {
            background: none;
            color: var(--contrast-main);
            text-decoration: none;
        }
        
        .littlefoot__content {
            background: var(--bg-light);
            color: var(--contrast-main);
            font-family: inherit;
            font-size: var(--font-small);
            letter-spacing: normal;
            line-height: 1.45;
            padding: 1em 1em 0.8em;
            text-align: left;
            text-indent: 0;
            text-transform: none;
        }
        
        .littlefoot__content > p:last-child { margin: 0; }
        .littlefoot__content a { color: var(--accent) !important; }
        .littlefoot__content .ref-jump { display: none; }
        .littlefoot__content, .littlefoot__popover, .littlefoot__wrapper { border-radius: 0; }
        .littlefoot__popover { border: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); padding: 0; }
        .littlefoot__tooltip { border: 0; background-color: var(--bg-light); }
    
    /* Made */
    .made { font-size: var(--font-small); }
    .made i { color: #dd2323; }

/* Header */
.header {
    align-items: center;
    background: var(--bg-accent-dark);
    display: flex;
    justify-content: space-between;
    padding: 1em var(--padding-inline);
}

.header a { color: var(--contrast-dark); text-decoration: none; }
.header .logo { font-size: var(--font-medium); line-height: 1; text-transform: uppercase; }

    /* Navigation */
    .nav a { display: block; padding: 0.5em 1em; }
    .nav a:hover, .nav a.current { background: rgba(255, 255, 255, 0.3); }
    .nav a.current { font-weight: bold; }
    .nav li { margin-inline-start: 0.5em; }
    .nav ul { display: flex; list-style: none; margin: 0; }
    
        /* Menu */
        .nav .menu-button {
            display: none;
            font-size: var(--font-large);
            line-height: 1;
            padding: 0.5em 0.5em 0.3em;
        }

/* Heroes */
.hero {
    align-items: center;
    background: var(--bg-accent);
    color: var(--contrast-dark);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid);
    padding: var(--padding-block) var(--padding-inline) calc(var(--padding-block) - 1em);
    position: relative;
    text-align: center;
}

.hero a, .hero .littlefoot__button { color: var(--contrast-dark); }

.hero-bg {
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    mix-blend-mode: multiply;
    object-position: 50% 50%;
    object-fit: cover;
    opacity: 0.15;
    position: absolute;
    z-index: 1;
}

.hero .block-wide { position: relative; z-index: 10; }
.hero p { margin: 0 0 0.5em; }

    /* Book */
    .hero-book { align-items: stretch; gap: 0; padding: 0; }
    
    .hero-book-media {
        display: block;
        block-size: 100%;
        grid-column: 7 / -1;
        padding: 1rem;
        position: relative;
    }
    
    .hero-vol-media img {
        block-size: 100%;
        display: block;
        inline-size: 100%;
        mix-blend-mode: multiply;
        object-fit: contain;
        object-position: 50% 50%;
    }
    
    .hero-book-title {
        display: flex;
        flex-direction: column;
        grid-column: 2 / 7;
        justify-content: center;
        padding: var(--padding-block) 0;
        position: relative;
        text-align: left;
    }
    
    .hero-book-title h1 { font-size: var(--font-xlarge); margin: 0.3rem 0; }
    .hero-book-title p { margin: 1rem 0; }
    
    /* Memoir */
    .hero-memoir { align-items: center; }
    .hero-memoir p { line-height: 1.2; margin: 0; }
    .hero-memoir-life { font-size: var(--font-medium); }
    .hero-memoir-media { background: var(--bg-light); grid-column: 2 / span 3; position: relative; }
    .hero-memoir-media a { box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1); display: block; overflow: hidden; padding: 0.5rem; }
    .hero-memoir-media img { display: block; mix-blend-mode: multiply; }
    .hero-memoir-occupation { font-size: var(--font-large); }
    .hero-memoir-subtitle { margin: 0; text-transform: uppercase; }
    .hero-memoir-title { grid-column: 6 / -2; text-align: left; }
    .hero-memoir-title h1 { margin: 0; }
    
    /* Volume */
    .hero-vol { align-items: stretch; gap: 0; padding: 0; }
    
    .hero-vol-media {
        background: var(--bg-light);
        display: block;
        block-size: 100%;
        grid-column: 7 / -1;
        padding: var(--padding-block) var(--padding-inline);
        position: relative;
    }
    
    .hero-vol-media .hero-vol-media { padding: 0; }
    
    .hero-vol-media img {
        block-size: 100%;
        display: block;
        inline-size: 100%;
        mix-blend-mode: multiply;
        object-fit: contain;
        object-position: 50% 50%;
    }
    
    .hero-vol-media-title {
        color: var(--contrast-main);
        font-size: var(--font-small);
        inset-block-end: 0;
        inset-inline-start: 50%;
        line-height: 1.3;
        position: absolute;
        text-decoration: none;
        transform: translate(-50%, -50%);
    }
    
    .hero-vol-num { letter-spacing: 0.02em; margin: 0; text-transform: uppercase; }
    .hero-vol-subtitle { font-size: var(--font-xlarge); line-height: 1; margin: 0; }
    
    .hero-vol-title {
        display: flex;
        flex-direction: column;
        grid-column: 1 / 7;
        justify-content: center;
        padding: var(--padding-block) calc(var(--padding-inline) * 2);
        position: relative;
    }
    
    .hero-vol-title h1 { font-size: var(--font-xxlarge); margin: 0.3rem 0; }
    .hero-vol-title *:not(img) { z-index: 2; }

/* Icons */
.fa-mars, .fa-venus { font-size: 0.9em; }

/* Intro */
.intro { font-size: var(--font-medium); line-height: 1.2; }

/* Leaders */
.leaders { list-style: none; padding-inline-start: 0; }
.leaders ol { list-style: none; padding-inline-start: 1em; }
.li { display: flex; justify-content: space-between; line-height: 1.3; margin-block-end: 0.25em; }

.li::after {
    border-block-end: 2px dotted var(--contrast-main);
    content: "";
    display: block;
    flex: 1 1 auto;
    order: 2;
    margin: 0 0.5em 0.4em;
}

.lk { order: 1; }
.lv { order: 3; }

/* Leaves */
.leaves { align-items: center; display: grid; gap: 0; grid-template-columns: var(--grid); }
.leaves-description { grid-column: 2 / 7; }
.leaves-media { grid-column: 7 / -1; padding: 0 5rem; }

/* Letters */
.letter {
    background: var(--bg-light);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    border: 0;
    padding: 1.5em 1.5em 0.5em;
    margin: 2rem 0;
}

/* Locations */
.locations { margin: 0 0 1rem; }
.locations li, .locations p, .locations ul { display: inline; }
.locations li::after { content: ","; margin: 0 0.1em 0 0; }
.locations li:last-child::after { content: ""; margin: 0; }
.locations p { margin: 0 0.1em 0 0; }
.locations ul { margin: 0; }

/* Locked */
.locked { overflow: hidden; }

/* Memoirs */
.memoirs {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.memoirs a { text-decoration: none; }
.memoirs a:hover { text-decoration: underline; }
.memoirs p { margin: 0 0 0.3rem; }
.memoirs li { align-items: flex-start; display: flex; flex-direction: column; margin-block-end: 1rem; }
.memoirs-century { font-size: var(--font-large); }
.memoirs-desc { flex: 1 1 auto; }
.memoirs-life { font-size: var(--font-medium); line-height: 1; }
.memoirs-name { font-size: var(--font-medium); line-height: 1.2; }
.memoirs-occupation { font-size: var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; }
.memoirs-summary { font-size: var(--font-small); line-height: 1.55; }

.memoirs-thumb {
    background: var(--bg-light);
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    display: block;
    flex: 0 0 auto;
    block-size: 300px;
    margin-block-end: 2rem;
    padding: 1rem 0.5rem 0.5rem;
    transition: all 0.15s ease-in-out;
}

.memoirs-thumb:hover { transform: scale(1.2); }
.memoirs-thumb img { display: block; block-size: 100%; mix-blend-mode: multiply; }

    /* Promo */
    .memoirs-promo { background: var(--bg-light); }
    .memoirs-promo .block-wide { align-items: center; display: flex; }
    .memoirs-promo-primary { flex: 0 0 auto; inline-size: 50%; padding: 0 2rem 0 0; }
    .memoirs-promo-secondary { display: block; flex: 0 0 auto; inline-size: 50%; }
    
    .memoirs-promo-secondary img {
        block-size: 100%;
        display: block;
        object-fit: cover;
        object-position: 50% 50%;
    }

/* Plates */
    /* Details */
    .plate-details { align-items: center; }
    .plate-details h1 { color: var(--bg-accent); font-size: var(--font-xlarge); margin-block-end: 0 }
    .plate-details h1::after, .plate-details h1::before { display: none; }
    .plate-description { grid-column: 7 / span 6; padding: 2rem; }
    .plate-subtitle { font-size: var(--font-medium); font-style: italic; line-height: 1.2; margin-block-end: 0.5em; }
    .plate-media { grid-column: 1 / span 6; }
    .plate-volume { font-size: var(--font-small); text-transform: uppercase; }
    
    /* List */
    .plates {
        display: grid;
        gap: 2rem 1rem;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        line-height: 1.2;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .plates a { color: var(--contrast-main); display: block; text-align: center; text-decoration: none; }
    
    .plates-thumb {
        display: block;
        margin-block-end: 0.5rem;
        padding: 100% 0 0 0;
        position: relative;
    }
    
    .plates a:hover img { transform: translate(-50%, -50%) scale(1.1); }
    
    .plates-thumb img {
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        mix-blend-mode: multiply;
        object-fit: contain;
        object-position: 50% 50%;
        position: absolute;
        transition: all 0.1s ease-in-out;
        transform: translate(-50%, -50%);
    }
    
    .plate-wide .fig-wide { grid-row: 1; }
    
    /* Source links */
    .op i { font-size: 0.9em; line-height: 0.5em; padding: 0 0.2em 0 0.1em; }
    
    /* Titles */
    .plate-title {
        font-size: var(--font-xlarge);
        font-weight: normal;
        line-height: 0.9;
        margin: 1.2em 0 0;
        text-align: center;
        text-transform: uppercase;
    }
    
    .plate-title:first-child { margin: 0; }
    .plate-title + p { text-align: center; }
    .plate-title.isolated { margin-block-end: 0.5em; }
    .plate-title.isolated + p { text-align: left; }
    .plate-title.subtitle { font-size: var(--font-large); }
    .plate-title-extra { font-weight: normal; text-align: center; margin: 1.2em 0 0.3em;}
    .plate-title-extra + .plate-title { margin-block-start: 0; }

/* Posters */
    /* Details */
    .poster-details { align-items: center; }
    .poster-details h1 { color: var(--bg-accent); font-size: var(--font-xlarge); }
    .poster-details h1::after, .plate-details h1::before { display: none; }
    .poster-description { grid-column: 7 / span 5; padding: 2rem; }
    .poster-media { grid-column: 2 / span 5; text-align: center; }
    .poster-media a { display: inline-block; margin: 0 auto; position: relative; }
    
    .poster-media a::after {
        block-size: 100%;
        border: 0.8rem solid var(--contrast-main);
        box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2), inset 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.1);
        content: "";
        position: absolute;
        inline-size: 100%;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
    }
    .poster-media img { display: block; }
    
    /* List */
    .posters {
        display: grid;
        font-size: var(--font-medium);
        gap: var(--grid-gap);
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        list-style: none;
        margin: 2rem 0;
        text-align: center;
    }
    
    .posters a { text-decoration: none; }
    .posters a:hover img { transform: scale(1.07); transition: all 0.1s ease-in-out; }
    
    .posters img {
        border: 0.5rem solid var(--contrast-main);
        display: block;
        box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
        inline-size: 100%;
        margin-block-end: 1rem;
    }
    
    .posters-preview { grid-template-columns: repeat(4, 1fr); }
    .posters-title { display: block; line-height: 1.1; }

/* References */
.refs dd { margin-inline-start: 2rem; }
.refs dt { font-size: var(--font-medium); line-height: 1.2; }
.refs dt cite { font-style: normal; }
.refs-byline { font-style: italic; margin: 0 !important; }

/* Skip */
.skip {
    background: var(--bg-light);
    border: 2px solid var(--contrast-main);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    color: var(--contrast-main);
    inset-block-start: 0.5rem;
    inset-inline-start: -1000rem;
    padding: 0.4em 0.7em;
    position: absolute;
    transform: translateX(-50%);
    text-decoration: none;
}

.skip:focus { inset-inline-start: 50%; }

/* Slides */
.slides.slick-initialized .slick-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slides .slick-list, .slides .slick-track { block-size: 100%; }

.slides .slick-next, .slides .slick-prev {
    background: var(--bg-light);
    block-size: var(--font-xlarge);
    border-radius: 100%;
    inline-size: var(--font-xlarge);
    opacity: 0.8;
    transform: translate(0, -100%);
    z-index: 10;
}

.slides .slick-next:hover, .slides .slick-prev:hover {
    background: var(--bg-light);
    box-shadow: 0 9px 14px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.slides .slick-next { inset-inline-end: 0; }
.slides .slick-prev { inset-inline-start: 0; }
.slides .slick-next::before { content: "›"; }

.slides .slick-next::before, .slides .slick-prev::before {
    color: var(--contrast-main);
    font-size: var(--font-xxlarge);
    line-height: revert;
}

.slides .slick-prev::before { content: "‹"; }

/* Sources */
.sources { list-style: none; padding-inline-start: 0; }

.sources li {
    display: grid;
    column-gap: 2rem;
    grid-template-columns: 200px auto;
    margin: 3rem 0;
    row-gap: 1rem;
}

.sources .fa-star.fa-light { opacity: 0.4; }
.sources .fa-star.fa-solid { color: var(--accent); }
.sources-desc { grid-column: 2; }
.sources-desc p { margin: 0; }

.sources-links {
    background: var(--bg-light);
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    grid-column: 2;
    grid-row: 2;
    overflow-x: auto;
}

.sources-links table { margin: 0; table-layout: fixed; }
.sources-links td, .sources-links th { padding: 0.5em; text-align: left; }
.sources-links th { font-style: normal; }
.sources-links td { border-width: 1px 0; vertical-align: top; }
.sources-links-id { display: block; font-size: var(--font-xsmall); opacity: 0.5; text-transform: uppercase; }
.sources-num { text-transform: uppercase; }

.sources-thumb {
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    inline-size: 200px;
    margin: 0 2rem 0 0;
}

.sources-title-primary { font-size: var(--font-large); line-height: 1.1; margin: 0; }
.sources-title-secondary { margin: 0; }

    /* Features */
    .sources-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; list-style: none; margin: 0; }
    .sources-features a { display: block; }
    .sources-features img { box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1); }
    .sources-features li { text-align: center; }
    
    .sources-features-title {
        color: var(--accent);
        font-size: var(--font-large);
        line-height: 1.05;
        margin-block-end: 0.5rem;
    }

/* Stats */
.stats {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(3, 1fr);
    line-height: 1.3;
    list-style: none;
    margin-inline-start: 0;
    text-align: center;
}

.stats-icon { display: block; margin: 0 auto; }
.stats-num { color: var(--accent); display: block; line-height: 1; font-size: var(--font-xlarge); }

/* Synonymy */
.synonymy {
    font-size: var(--font-small);
    line-height: 1.4;
    padding-inline-start: 1.5em;
    text-indent: -1.5em;
}

.synonymy * { text-indent: 0; }
.synonymy:has(+ .synonymy) { margin-block-end: 0.25em; }

/* Synopsis */
.synopsis dd { margin-inline-start: 2rem; }
.synopsis dd p { margin-block-end: 0.5em; }
.synopsis dt { font-size: var(--font-base); }

/* Tables */
.table {
    background:
        linear-gradient(to right, var(--bg-main) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg-main) 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
    overflow: auto;
}

.noborder td { border: 0; padding-inline-start: 0; }

/* TOC */
.toc {
    inset-block-start: 0;
    inset-inline-start: 0;
    line-height: 1.5;
    position: sticky;
    z-index: 100;
}

.toc a { color: var(--contrast-main); text-decoration: none; }
.toc.open .toc-button { background: var(--accent); color: var(--contrast-dark); }
.toc.open .toc-list { display: block; }

.toc-button {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.3rem;
    display: block;
    inset-block-start: var(--padding-inline);
    inset-inline-start: var(--padding-inline);
    line-height: 0.5;
    padding: 0.7em;
    position: absolute;
    transition: all 0.1s ease-in-out;
}

.toc-button-label { display: none; }

.toc-button:hover {
    background: var(--bg-light);
    box-shadow: 0 9px 14px rgba(0, 0, 0, 0.1);
    color: var(--contrast-main);
}

.toc-list {
    background: var(--bg-light);
    box-shadow: 1rem 1rem 0 rgba(0, 0, 0, 0.1);
    display: none;
    inline-size: 30rem;
    inset-block-start: 4.2rem;
    inset-inline-start: var(--padding-inline);
    list-style: none;
    margin: 0;
    max-block-size: 73dvh;
    max-inline-size: 80dvw;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    position: absolute;
    scroll-target-group: auto;
}

.toc-list a { align-items: center; display: flex; padding: 0.2rem; transition: 0.1s; }
.toc-list a:hover { background: rgba(0, 0, 0, 0.1); text-decoration: underline; }
.toc-list a:target-current { background: var(--accent); color: var(--contrast-dark); }
.toc-list ol { list-style: none; padding-left: 1rem; }

.toc-thumb {
    background: #fff;
    block-size: 3rem;
    box-shadow: 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
    inline-size: 3rem;
    margin-inline-end: 0.5rem;
    object-fit: contain;
    object-position: 50% 50%;
    padding: 0.1rem;
}

/* Trees */
.tree {
    background:
        linear-gradient(to right, var(--bg-main) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg-main) 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
    line-height: 1.3;
    list-style: none;
    overflow: auto;
    margin-inline-start: 0;
    padding: 0;
}

.tree-branch { align-items: center; display: flex; margin: 0.2rem 0; }
.tree-branch .fence { align-self: stretch; flex: 0 0 auto; }
.tree-part { flex: 0 0 auto; list-style: none; margin-inline-start: 0; padding-inline-start: 0; }
.tree-part-fill { flex: 1 1 auto; }
.tree-sections li { flex: 0 0 auto; margin: 0; }
.tree-sections ul { gap: 23px; list-style: none; display: flex; margin-inline-start: 0; }

    /* Fences */
    .fence { display: flex; flex-direction: column; font-style: normal; line-height: 1; margin: 0 5px; inline-size: 13px; }
    .fence * { display: block; flex: 1 1 auto; }
    .fence svg { fill: #000; }
    .fence.flipped { transform: scaleX(-1); }
    .fence-extension { block-size: 100%; }

/* Typography */
.caps { font-size: 0.9em; letter-spacing: 0.06em; text-transform: uppercase; }
.flip { display: inline-block; transform: scale(-1); }
.do { color: transparent; }
.nb { white-space: nowrap; }
.num { text-align: right; }
.scaps { font-style: normal; font-variant: small-caps; }

    /* Columns */
        /* Explicit */
        [class*="columns"] { display: flex; justify-content: space-between; }
        .column { flex: 0 0 auto; }
        .columns2 .column { width: 48%; }
        .columns3 .column { width: 31%; }
        .columns4 .column { width: 23%; }
        
        /* Natural */
        [class*="cols"] { column-gap: 2rem; margin-inline-start: 0; }
        [class*="cols"] li { break-inside: avoid; margin-block-end: 0; }
        ul[class*="cols"] { list-style: none; }
        .cols2 { columns: 2; }
        .cols3 { columns: 3; }
        .cols4 { columns: 4; }
        .cols6 { columns: 6; }
    
    /* Lists */
    .custom-list { list-style: none; }
    .custom-list > li { counter-increment: item; }
    .custom-list > li::marker { content: attr(data-marker) " " counter(item) ". "; }
    .lower-alpha { list-style: lower-alpha; }
    .lower-alpha > li::marker { font-style: italic; }
    .lower-double-alpha { list-style: none; }
    .lower-double-alpha > li { counter-increment: item; }
    .lower-double-alpha > li::marker { content: counter(item, lower-alpha) ". " counter(item, lower-alpha) ". "; font-style: italic; }
    .lower-roman { list-style: lower-roman; }
    .upper-alpha { list-style: upper-alpha; }
    .upper-roman { list-style: upper-roman; }

/* Volumes */
.vols {
    display: grid;
    list-style: none;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0 0 2rem;
    padding: 0;
}

.vols a {
    background: var(--bg-light);
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    color: #fff;
    display: block;
    overflow: hidden;
    position: relative;
    transition: all 0.15s ease-in-out;
}

.vols a:hover {
    box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    transform: scale(1.07);
}

.vols img { display: block; inline-size: 100%; mix-blend-mode: multiply; }

.vols-overlay {
    background: linear-gradient(to bottom,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%);
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
    line-height: 1.2;
    padding: 2.5rem 1rem 1rem;
    position: absolute;
}

.vols-num { display: block; font-size: var(--font-xlarge); font-weight: bold; line-height: 1; }
.vols-heading { margin-bottom: 1em; text-align: center; }
.vols-heading em { color: var(--contrast-main); display: block; font-size: 1rem; font-style: italic; }

/* Warning */
.warning { background: var(--bg-accent-dark); color: var(--contrast-dark); }
.warning p { margin: 0; }


/* Widths
==================================================*/
@media screen and (max-width: 1300px) {
    /* Divisions */
    .divisions { justify-content: flex-start; }
}
@media screen and (max-width: 1000px) {
    :root { --grid-gap: 0.5rem; }
    
    /* Backgrounds */
    .bgl, .bgr { display: none; }
    
    /* Blocks */
    .block-half { grid-column: 2 / -2; grid-row: 2; }
    .block-narrow { grid-column: 2 / -2; }
    
    /* Book features */
    .book-feature { display: block; }
    .book-feature-primary { margin-bottom: 2rem; }
    
    /* Figures */
    .fig-narrow { grid-column: 2 / -2; margin: 0 0 1rem; height: auto; position: static; }
    .fig-wide { margin-block-end: 1rem; }
    
    /* Footer */
    .colophon { display: block; text-align: center; }
    
    /* Editions */
    .editions { grid-template-columns: repeat(3, 1fr); }
    
    /* Footnotes */
    .footnotes > .block-wide > ol { column-count: 1; }
    
    /* Heroes */
        /* Book */
        .hero-book { display: flex; flex-direction: column-reverse; }
        .hero-book-media { margin: 0 auto; max-inline-size: 70%; padding: 0; }
        .hero-book-title { padding-block-start: 0; text-align: center; }
        .hero-book-title p { margin: 0.5em 0; }
    
    /* Leaves */
    .leaves { display: flex; flex-direction: column-reverse; }
    .leaves-media { inline-size: 60%; margin: 0 0 2rem; padding: 0; }
    
    /* Memoirs */
    .memoirs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .memoirs-thumb { block-size: 200px; }
    
    /* Navigation */
    .menu {
        background: var(--bg-accent-dark);
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
        display: none;
        inline-size: 100%;
        inset-block-start: 3.5rem;
        inset-inline-start: 0;
        max-height: calc(100dvh - 3.5rem);
        overflow-y: auto;
        padding: 0.5rem;
        position: absolute;
    }
    
    .nav .menu-button { display: block; font-size: 1rem; }
    .nav li { margin: 0; }
    .nav ul { display: block; }
    .nav.open .menu { display: block; z-index: 100; }
    
    /* Plates */
    .plate-description { padding: 0; }
    .plate-details { display: flex; flex-direction: column; }
    .plate-media { margin-block-end: 2rem; }
    
    /* Posters */
    .poster-description { padding: 0; text-align: center; }
    .poster-details { display: flex; flex-direction: column; }
    .poster-media { inline-size: 50%; margin-block-end: 2rem; }
    
    /* Sources */
    .sources li { align-items: center; grid-template-columns: 150px auto; }
    .sources-thumb { grid-row: 1; }
    .sources-links { grid-column: 1 / span 2; }
    
    /* Volumes */
    .vols a { box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.1); }
}

@media screen and (max-width: 850px) {
    :root { --grid: repeat(20, 1fr); }
    
    /* Book */
    .book-promo .block-wide { flex-direction: column-reverse; }
    .book-promo-primary, .book-promo-secondary { inline-size: auto; padding: 0; }
    .book-promo-secondary { margin-block-end: 2rem; }
    
    /* Filters */
    .filters-list { margin-block-end: 1em; }
    
    /* Figures */
    .fig-narrow { display: block; margin: 0; }
    .fig-narrow .fig-media { height: auto; inline-size: 80%; margin: 0 auto 2rem; position: static; }
    .fig-narrow .fig-media img { block-size: auto; max-block-size: 80vh; }
    .fig-wide { grid-column: 1 / -1; margin: 0; }
    
    /* Header */
    .header { padding: 0.5rem var(--padding-inline); }
    .header .logo { font-size: 1rem; }
    
    /* Heroes */
        /* Memoir */
        .hero-memoir { display: flex; flex-direction: column; }
        .hero-memoir-media { margin: 0 auto 1rem; max-inline-size: 13rem; }
        .hero-memoir-title { text-align: center; }
        
        /* Volume */
        .hero-vol { display: flex; flex-direction: column; }
        .hero-vol-media { block-size: auto; inline-size: 100%; margin: 0 auto; }
        .hero-vol-media img { margin: 0 auto; inline-size: 90%; }
    
    /* Memoirs */
    .memoirs { display: block; }
    .memoirs li { border-bottom: 1px solid var(--border); clear: both; }
    .memoirs-thumb { block-size: auto; inline-size: 8rem; }
    .memoirs-promo .block-wide { flex-direction: column; }
    .memoirs-promo-primary, .memoirs-promo-secondary { inline-size: auto; padding: 0; }
    .memoirs-promo-secondary { margin-block-end: 2rem; }
    
    /* Plates */
    .plates { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    
    /* Posters */
    .posters { grid-template-columns: 1fr 1fr; }
    
    /* TOC */
    .toc-button { inset-inline-start: 0.5rem; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    :root {
        --font-base: 20px;
        --font-scale: 1.125;
        --grid-gap: 0.5rem;
        --padding-block: 6vh;
        --padding-inline: 1rem;
    }
    
    section { gap: 0; }
    
    /* Content */
        /* Arrangements */
        .arrangement > li { display: block; }
        .arrangement ol { margin-inline-start: 2em; }
        
        /* Bibliography */
        .bib td { white-space: normal; }
        .bib-tyline, .bib-title { word-wrap: break-word; }
        
        /* Blocks */
        .block-half, .block-narrow, .block-wide { grid-column: 1 / -1; }
        
        /* Editions */
        .editions { display: block; text-align: left; }
        .editions img { block-size: auto; box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.1); inline-size: auto; position: static; }
        .editions li { align-items: flex-start; display: flex; margin-block-end: 1.5rem; }
        .editions-description { flex: 1 1 auto; }
        .editions-thumb { flex: 0 0 auto; inline-size: 25%; margin-inline-end: 1em; padding-block-start: 0; }
        
        /* Figures */
        .fig-narrow { grid-column: 1 / -1; }
        
        /* Filters */
        .filters { padding: 1rem; }
        .filters-list { display: block; }
        .filters-list .filters-cols { column-count: 1; }
        .filters-list p { font-weight: bold; margin-block-end: 0; }
        
        /* Memoirs */
        .memoirs li { display: block; }
        .memoirs-thumb { float: inline-end; inline-size: 5rem; margin: 0 0 1rem 1rem; }
        
        /* Posters */
        .poster-media a::after { border-width: 0.5rem; }
        
        /* Sources */
        .sources li { column-gap: 1rem; grid-template-columns: 30% auto; }
        .sources-features { display: block; }
        .sources-features li { margin-block-end: 2rem; }
        
        /* Stats */
        .stats { display: block; text-align: left; }
        .stats li { align-items: flex-start; display: flex; margin-block-end: 0.5rem; }
        .stats-desc { flex: 1 1 auto; }
        .stats-icon { block-size: 3.5em; flex: 0 0 auto; inline-size: 3.5em; margin-inline-end: 0.5rem; }
        
        /* TOC */
        .toc {
            background: var(--bg-light);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            inset-block-start: 0;
        }
        
        .toc-button { position: static; }
        .toc-button-label { display: inline-block; }
        .toc-list { inset-block-start: 2.5rem; max-inline-size: 100vw; inset-inline-start: 0; padding: 1rem; }
        
        /* Typgoraphy */
        [class*="cols"] { columns: 1 !important; }
        [class *= "columns"] { display: block; }
        
        /* Volumes */
        .vols { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}