/*----------------------+
 | Site: Printing Types |
 +----------------------*/

/* Imports
==================================================*/
@import url(/styles/reset.css);
@import url(/styles/fontawesome6/fontawesome.css);
@import url(/styles/fontawesome6/light.css);
@import url(/styles/monticello.css);


/* Fonts
==================================================*/
body, .dt-input { font-family: "Monticello Pro Roman", serif; }
.caslon { font-family: adobe-caslon-pro, "Monticello", serif; }

cite,
.cover-title-secondary,
.dt-input::placeholder,
em,
.fig-subtitle,
.illustration-subtitle,
.large-quote,
.logo-subtitle,
th {
    font-family: "Monticello", serif;
}

.scaps { font-family: "Monticello Roman SC", serif; }


/* Basics
==================================================*/
:root {
    /* Colors */
    --accent: #e22626;
    --bg-main: #fff;
    --bg-light-emphasis: #f5f4f0;
    --bg-strong-emphasis: #2f2f2f;
    --border: rgba(0, 0, 0, 0.2);
    --contrast-accent: #fff;
    --contrast-main: #222;
    --contrast-strong: #fff;
    
    /* Fonts */
    --font-scale: 1.25;
    --font-small: calc(var(--font-base) / var(--font-scale));
    --font-base: 22px;
    --font-large: calc(var(--font-base) * var(--font-scale));
    --font-xlarge: calc(var(--font-base) * pow(var(--font-scale), 3));
    --font-xxlarge: calc(var(--font-base) * pow(var(--font-scale), 4));
    
    /* Layout */
    --grid: 4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr;
    --grid-gap: 0.833rem;
    --padding-block: 6vw;
    --padding-inline: 2.5rem;
}

a { color: var(--accent); text-decoration: underline; }
a:hover { text-decoration: none; }
blockquote { border-inline-start: 1px solid var(--border); clear: both; padding-left: 1.5em; }
body { color: var(--contrast-main); font-feature-settings: "clig", "kern", "liga"; letter-spacing: 0.005em; line-height: 1.58; }
cite, em { font-style: italic; }
cite em { font-style: normal; }
del { opacity: 0.5; }
html { font-size: var(--font-base); }
h1 { font-size: var(--font-xxlarge); line-height: 1.1; margin-block-end: 0.5em; text-align: center; }
h1:last-child { margin: 0; }
h2 { font-size: var(--font-xlarge); line-height: 1.1; margin-block-end: 0.3em; text-align: center; }
h3 { font-size: var(--font-large); line-height: 1.1; margin: 1.5em 0; text-align: center; }
hr { background: var(--border); border: 0; clear: both; color: var(--border); height: 1px; margin: 2rem 0; }
img { max-inline-size: 100%; }
ins { border-block-end: 1px dashed var(--border); text-decoration: none; }
ol { list-style: decimal; padding-left: 2em; }
ol, p, table, ul { margin-block-end: 1em; }

section {
    border-block-end: 1px solid var(--border);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid);
    padding: var(--padding-block) var(--padding-inline);
}

sup { font-size: calc(1em / var(--font-scale)); line-height: 0.9; padding-inline-start: 0.1em; vertical-align: super; }
table { border-collapse: collapse; inline-size: 100%; }
td { border: 1px solid var(--border); vertical-align: middle; }
td, th { padding: 0.3em 1em 0.1em; white-space: nowrap; }
th { font-style: italic; text-align: center; vertical-align: bottom; }
ul { list-style: disc; margin-inline-start: 1.5em; }


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

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

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

/* Archives */
.archives { column-count: 2; column-gap: 2rem; list-style: none; margin-inline-start: 0; }
.archives li { break-inside: avoid; padding-inline-start: 1rem; text-indent: -1rem; }

/* Banners */
.banner img { display: block; inline-size: 100%; }

/* Blocks */
.block-full { grid-column: 1 / -1; }
.block-narrow { grid-column: 3 / -3; }
.block-wide { grid-column: 2 / -2; }

/* Cover */
.cover {
    background: var(--bg-light-emphasis);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid);
    padding: var(--padding-block) var(--padding-inline);
    position: relative;
}

.cover-bg {
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    object-position: 50% 50%;
    object-fit: cover;
    position: absolute;
}

.cover-title {
    background: var(--accent);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    color: var(--contrast-accent);
    grid-column: 2 / -2;
    padding: 0.833rem;
    position: relative;
    text-align: center;
    z-index: 1;
}

.cover-title-byline p { margin: 0; }
.cover-title-inner { border: 1px solid var(--contrast-accent); padding: 2.2rem 1rem 1.9rem; }
.cover-title-primary { letter-spacing: 0.07em; margin-block-end: 0.1em; text-transform: uppercase; }
.cover-title-secondary { font-size: var(--font-xlarge); font-style: italic; line-height: 1.1; margin-block-end: 0.2em;}
.cover-title-secondary p { margin: 0; }

    /* Chapter covers */
    .chapter-cover {
        display: grid;
        gap: var(--grid-gap);
        grid-template-columns: var(--grid);
        padding: calc(var(--padding-block) * 2.5) var(--padding-inline) 0;
        position: relative;
    }
    
    .chapter-cover::after {
        background: linear-gradient(to top,  rgba(41, 41, 41 ,0.4) 0%,rgba(0, 0, 0, 0) 70%);
        block-size: 100%;
        content: "";
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
        z-index: 1;
    }
    
    .chapter-cover + section { padding-block-start: 0; }
    
    .chapter-cover img {
        block-size: 100%;
        display: block;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        object-fit: cover;
        position: absolute;
    }
    
    .chapter-cover-content {
        background: var(--bg-main);
        box-shadow: 0 -25px 20px rgba(0, 0, 0, 0.2);
        grid-column: 2 / -2;
        padding: 2rem 5vw;
        z-index: 2;
    }

/* Data */
.data { border-collapse: initial; inline-size: 100%; }
.data td { border: 1px solid var(--border); border-width: 1px 0 0 0; }
.data td, .data th { text-align: left; white-space: normal; }

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

/* Fancybox */
.f-panzoom__viewport > .f-panzoom__content { background: var(--bg-main); padding: 1rem; }
.f-caption { max-inline-size: 40rem; padding: 2rem 1rem 3rem; text-align: center; }
.f-caption a { color: #fff; }
.f-caption p { margin: 0; }

/* Features */
.feature { align-items: center; }
.feature-copy { padding: 0 20%; text-align: center; }
.feature-media { padding: 0 1rem; text-align: center; }
.feature-media img { display: block; }

    /* Illustrations */
    .feature-illustrations { background: var(--bg-light-emphasis); }
    .feature-illustrations .feature-copy { grid-column: 1 / span 4; grid-row: 1; }
    .feature-illustrations .feature-media { grid-column: 5 / span 4; grid-row: 1; }
    
    /* Posters */
    .feature-posters { background: var(--bg-strong-emphasis); color: var(--contrast-strong); position: relative; }
    .feature-posters .feature-copy { grid-column: 5 / span 4; grid-row: 1; z-index: 2; }
    .feature-posters .feature-media { grid-column: 1 / span 4; grid-row: 1; z-index: 2; }
    .feature-posters .feature-media a { display: block; }
    
    .feature-posters .feature-media img {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
        display: block;
        inline-size: 80%;
        margin: 0 auto;
    }
    
    .feature-posters .feature-overlay {
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        object-fit: cover;
        opacity: 0.15;
        position: absolute;
        z-index: 1;
    }

/* Figures */
figcaption { text-align: center; }

    /* Actions */
    .fig-actions {
        display: flex;
        font-size: var(--font-small);
        gap: 1rem;
        justify-content: center;
        list-style: none;
        margin: 0.5em 0 1em;
    }
    
    .fig-actions a { text-decoration: none; }
    .fig-actions a:hover { text-decoration: underline; }
    
    /* Captions */
    .fig-title { margin: 0; }
    .fig-subtitle { font-size: var(--font-small); font-style: italic; margin: 0; }
    
    /* Layouts */
        /* Callout (narrow) */
        .fig-callout-narrow {
            align-items: center;
            background: var(--bg-light-emphasis);
            border-block-end: 1px solid var(--border);
            display: grid;
            gap: var(--grid-gap);
            grid-template-columns: var(--grid);
            padding: var(--padding-block) var(--padding-inline);
        }
        
        .fig-callout-narrow .fig-thumb { block-size: 80vh; grid-column: 5 / span 4; grid-row: 1; }
        .fig-callout-narrow .fig-thumb img { block-size: 100%; inline-size: 100%; object-fit: contain; margin: 0 auto; }
        .fig-callout-narrow figcaption { grid-column: 1 / span 4; grid-row: 1; padding: 0 2rem; }
        .fig-callout-narrow.flipped .fig-thumb { grid-column: 1 / span 4; }
        .fig-callout-narrow.flipped figcaption { grid-column: 5 / span 4; }
        
        /* Callout (full) */
        .fig-callout-full {
            background: var(--bg-light-emphasis);
            border-block-end: 1px solid var(--border);
            display: grid;
            gap: var(--grid-gap);
            grid-template-columns: var(--grid);
            padding: var(--padding-block) var(--padding-inline);
        }
        
        .fig-callout-full .fig-thumb { grid-column: 1 / -1; margin-block-end: 1rem; }
        .fig-callout-full .fig-thumb img { block-size: auto; inline-size: 100%; }
        .fig-callout-full figcaption { grid-column: 2 / -2; grid-row: 2; }
        
        /* Callout (wide) */
        .fig-callout-wide {
            background: var(--bg-light-emphasis);
            border-block-end: 1px solid var(--border);
            display: grid;
            gap: var(--grid-gap);
            grid-template-columns: var(--grid);
            padding: var(--padding-block) var(--padding-inline);
        }
        
        .fig-callout-wide .fig-thumb { grid-column: 2 / -2; margin-block-end: 1rem; }
        .fig-callout-wide .fig-thumb img { block-size: auto; inline-size: 100%; }
        .fig-callout-wide figcaption { grid-column: 2 / -2; grid-row: 2; }
        
        /* Inline */
        .fig-inline { margin: 2rem 0; }
        .fig-inline .fig-thumb { margin-block-end: 1rem; }
        .fig-inline .fig-thumb img { margin: 0 auto; max-block-size: 80vh; }
    
    /* Thumbs */
    .fig-thumb { display: block; }
    
    .fig-thumb img {
        background: var(--bg-main);
        border: 2px solid var(--bg-main);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        display: block;
        padding: 4vmin;
        transition: all 0.1s ease-in-out;
    }
    
    .fig-thumb:hover img { border-color: var(--contrast-main); }

/* Footer */
.footer {
    background: var(--bg-light-emphasis);
    border-top: 1px solid var(--border);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid);
    font-size: var(--font-small);
    margin-block-start: -1px;
    padding: var(--padding-block) var(--padding-inline);
}

.footer h2 { text-align: left; }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: var(--contrast-main); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-nav li { margin-block-end: 0.5rem; }
.footer-primary { grid-column: 1 / span 2; }
.footer-secondary { grid-column: 3 / -1; }
    
    /* Chapters */
    .footer-chapters {
        column-count: 2;
        column-gap: 0.833rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .footer-chapters a { display: flex; }
    
    .footer-chapters a, .footer-chapters-extras a {
        color: var(--contrast-main);
        text-decoration: none;
    }
    
    .footer-chapters a:hover, .footer-chapters-extras a:hover { text-decoration: underline; }
    
    .footer-chapters .chapter-num {
        color: var(--accent);
        flex: 0 0 auto;
        margin-inline-end: 0.4rem;
        inline-size: 2.4rem;
        text-align: right;
    }
    
    .footer-chapters > li { break-inside: avoid; margin-block-end: 0.5em; }
    .footer-chapters-extras { display: flex; list-style: none; margin-inline-start: 0; }
    .footer-chapters-extras li { margin-inline-end: 1em; }
    .footer-primary, .footer-secondary { margin-block-end: 1rem; }
    
    /* Colophon */
    .colophon {
        border-block-start: 1px solid var(--border);
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
        padding-block-start: 1rem;
    }
    
    .colophon p { margin: 0; }

/* Footnotes */
.footnotes { font-size: var(--font-small); line-height: 1.55; }
.footnotes > li { margin-block-end: 0.5em; }
.footnotes .ref-jump { margin-inline-start: 0.3em; text-decoration: none; }
.footnotes .ref-jump:hover { text-decoration: underline; }

    /* Figure footnotes */
    .fig-footnotes { font-size: var(--font-small); line-height: 1.45; margin-block-start: 0.5em; }
    .fig-footnotes > li { margin-block-end: 0; }
    
    /* 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;
    }
    
    .littlefoot__button.is-active,
    .littlefoot__button:active,
    .littlefoot__button:focus,
    .littlefoot__button:hover {
        background: none;
        color: var(--accent);
        text-decoration: none;
    }
    
    .littlefoot__content {
        background: var(--bg-main);
        color: var(--contrast-main);
        font-family: inherit;
        font-size: var(--font-small);
        line-height: 1.45;
        padding: 1em 1em 0.8em;
        text-align: left;
        text-indent: 0;
    }
    
    .littlefoot__content > p:last-child { margin: 0; }
    .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); }
    .littlefoot__tooltip { border: 0; background-color: var(--bg-main); }

/* Hanging indent */
.hanging { list-style: none; margin-inline-start: 0; padding-inline-start: 1.5em; }
.hanging > li { text-indent: -1.5em; }

/* Header */
.header {
    align-items: center;
    background: var(--bg-main);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    padding: 0.625rem var(--padding-inline);
}

    /* Logo */
    .logo { align-items: center; color: var(--contrast-main); display: flex; line-height: 1; text-decoration: none; }
    
    .logo-mark {
        align-items: center;
        background: var(--accent);
        block-size: 2.625rem;
        color: var(--contrast-accent);
        display: flex;
        flex: 0 0 auto;
        inline-size: 2.625rem;
        justify-content: center;
        margin-inline-end: 0.5rem;
        padding-block-start: 0.3em;
        position: relative;
    }
    
    .logo-mark::after {
        block-size: calc(100% - 8px);
        border: 1px solid var(--contrast-accent);
        content: "";
        inline-size: calc(100% - 8px);
        inset-block-start: 3px;
        inset-inline-start: 3px;
        position: absolute;
    }
    
    .logo-title { display: block; font-size: var(--font-large); margin-block-end: 0.1em; padding-block-start: 0.2em; }
    .logo-subtitle { display: block; font-style: italic; }
    
    /* Navigation */
    .menu-button { display: none; font-size: var(--font-large); line-height: 1; padding: 0.5em 0.5em 0.3em; }
    
    .nav-item {
        color: var(--contrast-main);
        border: 1px solid transparent;
        display: inline-block;
        font-size: var(--font-small);
        letter-spacing: 0.07em;
        line-height: 1;
        padding: 0.8em 0.7em 0.4em;
        text-decoration: none;
        text-transform: uppercase;
        transition: all 0.1s ease-in-out;
    }
    
    .nav-item:hover { color: var(--accent); border-color: var(--contrast-main); }
    .nav-item.current { border-color: var(--accent); }
    .nav-pages { display: flex; list-style: none; margin: 0; }
    .nav-pages > li { margin-inline-start: 1rem; }
    
        /* Chapters menu */
        .chapters-menu {
            background: var(--bg-main);
            box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
            display: none;
            inline-size: 100%;
            inset-block-start: 3.8rem;
            inset-inline-start: 0;
            max-height: calc(100dvh - 3.8rem);
            overflow-y: auto;
            padding: 2rem;
            position: absolute;
            z-index: 10;
        }
        
        .chapters-menu.open { display: block; }
        
        .chapters-menu-close {
            appearance: none;
            background: none;
            border: 1px solid transparent;
            color: var(--contrast-main);
            cursor: pointer;
            font-size: var(--font-large);
            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;
        }
        
        .chapters-menu-close:hover { border-color: var(--accent); color: var(--accent); }
        
            /* Extras */
            .chapters-menu-extras { display: flex; list-style: none; margin: 0 0 1rem; }
            
            .chapters-menu-extras a {
                border: 1px solid transparent;
                color: var(--contrast);
                display: block;
                line-height: 1;
                padding: 0.8em 0.7em 0.4em;
                text-decoration: none;
            }
            
            .chapters-menu-extras a:hover { border-color: var(--contrast-main); color: var(--accent); }
            .chapters-menu-extras li { margin-inline-end: 2rem; }
            
            /* List */
            .chapters-menu-list { column-count: 2; column-gap: 0.833rem; list-style: none; margin: 0; padding: 0; }
            .chapters-menu-list a { border: 1px solid transparent; color: var(--contrast); display: flex; padding: 0.5em; text-decoration: none; }
            .chapters-menu-list a:hover { border-color: var(--contrast-main); color: var(--accent); }
            .chapters-menu-list .chapter-num { color: var(--accent); flex: 0 0 auto; margin-inline-end: 1rem; inline-size: 3rem; text-align: right; }
            .chapters-menu-list > li { break-inside: avoid; }

/* Highlights */
.hl { background: #fe0; }
/*:target { animation: highlight 3s ease-in-out }

@keyframes highlight {
    0% { box-shadow: 0 0 0 1px var(--contrast-main); background: var(--bg-light-emphasis); }
    100% { box-shadow: none; background: transparent; }
}*/

/* Illustrations */
.browse-illustrations { background: var(--bg-light-emphasis); }

    /* Details */
    .illustration-details {
        background: var(--bg-light-emphasis);
        display: grid;
        gap: var(--grid-gap);
        grid-template-columns: var(--grid);
        padding: var(--padding-block) var(--padding-inline);
    }
    
    .illustration-copy { grid-column: 5 / span 4; }
    .illustration-copy h1 { margin-block-end: 0.2em; text-align: left; }
    .illustration-figure { color: var(--accent); font-size: var(--font-small); letter-spacing: 0.07em; text-transform: uppercase; }
    .illustration-preview { display: block; margin-block-end: 1rem; padding: 1rem; }
    .illustration-subtitle { font-style: italic; }
    .illustration-year { color: var(--accent); font-size: var(--font-xlarge); line-height: 1; margin-block-end: 0.2em; }
    
        /* Slides */
        .illustration-media {
            align-content: center;
            grid-column: 1 / span 4;
            margin-block-start: -1rem;
            padding: 0 var(--font-xxlarge);
        }
        
        .illustration-media img {
            background: var(--bg-main);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            display: block;
            margin: 0 auto;
            max-block-size: 80vh;
            padding: 1rem;
        }
        
        .illustration-media.slick-initialized .slick-slide {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .illustration-media .slick-list, .illustration-media .slick-track { block-size: 100%; }
        
        .illustration-media .slick-next, .illustration-media .slick-prev {
            block-size: var(--font-xxlarge);
            inline-size: var(--font-xxlarge);
        }
        
        .illustration-media .slick-next { inset-inline-end: 0; }
        .illustration-media .slick-prev { inset-inline-start: 0; }
        .illustration-media .slick-next::before { content: "›"; }
        
        .illustration-media .slick-next::before, .illustration-media .slick-prev::before {
            color: var(--contrast-main);
            font-size: var(--font-xxlarge);
        }
        
        .illustration-media .slick-prev::before { content: "‹"; }
        
        .illustration-media-num, .illustration-media-title {
            font-size: var(--font-small);
            margin: 0;
            text-align: center;
        }
    
    /* Grid */
    .illustrations {
        display: grid;
        column-gap: var(--grid-gap);
        font-size: var(--font-small);
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        line-height: 1.45;
        list-style: none;
        margin: 3rem 0 0;
        padding: 0;
        row-gap: calc(var(--grid-gap) * 3);
    }
    
    .illustrations a { color: var(--contrast-main); display: block; text-align: center; text-decoration: none; }
    .illustrations-extras { color: var(--accent); display: block; }
    
    .illustrations-thumb {
        display: block;
        margin-block-end: 0.5rem;
        padding: 100% 0 0 0;
        position: relative;
        
    }
    
    .illustrations a:hover img { transform: translate(-50%, -50%) scale(1.1); }
    
    .illustrations-thumb img {
        background: var(--bg-main);
        block-size: 100%;
        border: 1px solid var(--border);
        inline-size: 100%;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        object-fit: contain;
        object-position: 50% 50%;
        padding: 0.8rem;
        position: absolute;
        transition: all 0.1s ease-in-out;
        transform: translate(-50%, -50%);
    }
    
    /* Grid collage */
    .grid { display: flex; flex-wrap: wrap; justify-content: center; }
    .grid a { display: block; margin: 0.3em; position: relative; }
    .grid a:hover img { border-color: #000; }
    
    .grid img {
        background: #fff;
        border: 1px solid var(--border);
        display: block;
        height: 150px;
        padding: 10px;
    }
    
    .grid .num {
        background: #fff;
        font-size: var(--font-small);
        inset-block-end: 1px;
        inset-inline-start: 1px;
        line-height: 1;
        padding: 0.3em;
        position: absolute;
    }
    
    /* Tools */
    .illustrations-tools { display: flex; justify-content: center; }
    
        /* Filters */
        .filters {
            background: var(--bg-main);
            border: 1px solid var(--border);
            display: none;
            gap: 1rem;
            grid-template-columns: 1fr 1fr 1fr;
            justify-content: space-between;
            margin-block-end: 2rem;
            padding: 2rem;
            position: relative;
        }
        
        .filters.open { display: grid; }
        
        .filters-close {
            appearance: none;
            background: none;
            border: 1px solid transparent;
            color: var(--contrast-main);
            cursor: pointer;
            font-size: var(--font-large);
            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 { flex: 0 0 auto; }
        .filters-list a { text-decoration: none; }
        .filters-list a:hover { text-decoration: underline; }
        .filters-list p { font-style: italic; margin-block-end: 0.5em; }
        .filters-list ul { list-style: none; margin: 0; }
        
            /* 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); }
        
        /* Navigation */
        .nav-illustrations { display: flex; gap: 1rem; justify-content: center; list-style: none; }
        
        .nav-illustrations a {
            color: var(--contrast-main);
            border: 1px solid transparent;
            display: inline-block;
            font-size: var(--font-small);
            letter-spacing: 0.07em;
            line-height: 1;
            padding: 1em 0.8em 0.6em;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 0.1s ease-in-out;
        }
        
        .nav-illustrations a:hover { color: var(--accent); border-color: var(--contrast-main); }
        .nav-illustrations a.current { border-color: var(--accent); }

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

/* No border */
.noborder { border: 0; }

/* Original links */
.orig i { font-size: 0.9em; line-height: 0.5em; padding: 0 0.2em; }

/* Placeholder */
input[type="search"] { apperance: none; -webkit-appearance: none; border: 1px solid var(--border); }
input::placeholder { color: #777 !important; font-style: italic; }

/* Poster */
.poster {
    border: 1rem solid var(--contrast-main);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    display: block;
}

.poster img { display: block; }

/* Quotes */
.large-quote { border: 0; font-size: var(--font-large); font-style: italic; padding: 0; text-align: center; }
.large-quote cite { display: block; font-size: var(--font-base); }

/* Samples */
.samples {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    --hspace: 0.2rem;
    --vspace: 0.2rem;
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
}

.samples a {
    align-items: center;
    border: 1px solid transparent;
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.samples a:hover { background: var(--bg-main); border-color: var(--contrast-main); }
.samples li { align-items: center; display: flex; flex-wrap: wrap; margin-block-end: var(--vspace); }
.samples img { max-block-size: 1.5rem; max-inline-size: 12em; mix-blend-mode: multiply; }

.samples-divider {
    align-self: stretch;
    border: 1px solid var(--border);
    margin: 0 0.1rem;
    transform: scale(0.7) rotate(15deg);
}

.samples-year {
    color: var(--accent);
    display: inline-block;
    font-size: var(--font-small);
    inline-size: 1.4em;
    margin-inline-end: var(--hspace);
    position: relative;
}

.samples-year span {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-43%, -50%) rotate(-90deg);
}

/* Skip */
.skip {
    background: var(--bg-main);
    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.8em 0.7em 0.4em;
    position: absolute;
    transform: translateX(-50%);
    text-decoration: none;
}

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

/* Sources */
.sources p { margin: 0; }

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

.sources th { cursor: pointer; padding: 0; text-align: left; }
.sources th:hover { background: var(--bg-light-emphasis); }
.sources-description { font-size: var(--font-small); line-height: 1.45; }
.sources-figs { font-size: var(--font-small); display: flex; flex-wrap: wrap; list-style: none; margin: 0.3em 0 0; }
.sources-figs a { border: 2px solid transparent; display: block; position: relative; transition: all 0.1s ease-in-out; }
.sources-figs a:hover { border-color: var(--contrast-main); }
.sources-figs img { block-size: 5rem; display: block; inline-size: 5rem; object-fit: cover; }
.sources-figs li { margin: 0 0.5em 0.5em 0; }

.sources-figs-label {
    background: var(--bg-main);
    inset-block-end: 0;
    inset-inline-start: 0;
    color: var(--contrast-main);
    opacity: 0.9;
    padding: 0.3em 0.6em 0.2em;
    position: absolute;
}

.sources-legend { font-size: var(--font-small); }
.sources-title { font-size: var(--font-large); line-height: 1.3; margin-block-end: -0.1em !important; }

/* Subtitle */
.subtitle {
    color: var(--accent);
    font-size: var(--font-small);
    letter-spacing: 0.07em;
    margin-block-end: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

/* Supplemental notes */
.supp-note {
    border: 1px solid var(--accent);
    border-width: 1px 1px;
    margin: 1.5em 0;
    padding: 1.5em 1.5em 1.3em;
}

.supp-note > p:last-child { margin: 0; }
.supp-note-title { color: var(--accent); font-size: var(--font-small); margin: 0 0 0.25em; letter-spacing: 0.07em; text-transform: uppercase; }

/* Table of contents */
.toc { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: stretch; list-style: none; margin: 0; padding: 0; }

.toc a {
    border: 1px solid var(--border);
    border-width: 0 0 1px 1px;
    color: var(--contrast);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.toc a:hover { background: var(--bg-light-emphasis); }

.toc img {
    background: var(--bg-main);
    border: 1px solid var(--border);
    margin-block-end: 1.5rem;
    object-fit: cover;
    padding: 0.8rem;
}

.toc li { display: flex; }
.toc-front-matter li { display: flex; flex: 1 1 auto; }
.toc-front-matter ol { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.toc-num { color: var(--accent); font-size: var(--font-xxlarge); line-height: 1; }
.toc-title { display: block; font-size: var(--font-large); margin-block-end: 1rem; }

    /* Chapter contents */
    .chapter-toc {
        inset-block-start: 0;
        inset-inline-start: 0;
        position: sticky;
        z-index: 3;
    }
    
    .chapter-toc a { text-decoration: none; }
    .chapter-toc.open .chapter-toc-button { border-color: var(--accent); }
    .chapter-toc.open .chapter-toc-list { display: block; }
    
    .chapter-toc-button {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid transparent;
        display: block;
        inset-block-start: 1rem;
        inset-inline-start: var(--padding-inline);
        line-height: 0.5;
        padding: 0.7em;
        position: absolute;
        transition: all 0.1s ease-in-out;
    }
    
    .chapter-toc-button-label { display: none; }
    
    .chapter-toc-button:hover {
        background: var(--bg-main);
        border-color: var(--contrast-main);
        box-shadow: 0 9px 14px rgba(0, 0, 0, 0.1);
        color: var(--accent);
    }
    
    .chapter-toc-fig {
        align-items: center;
        color: var(--contrast-main);
        display: flex;
        font-size: var(--font-small);
        line-height: 1.45;
        padding: 0.5rem 1rem;
    }
    
    .chapter-toc-fig:hover { background: var(--bg-light-emphasis); }
    
    .chapter-toc-fig-thumb {
        background: var(--bg-main);
        block-size: 4rem;
        border: 1px solid var(--border);
        flex: 0 0 auto;
        inline-size: 4rem;
        margin-inline-end: 0.5em;
        object-fit: contain;
        object-position: 50% 50%;
        padding: 0.2rem;
    }
    
    .chapter-toc-fig-title { flex: 1 1 auto; }
    
    .chapter-toc-list {
        background: var(--bg-main);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        display: none;
        inline-size: 24rem;
        inset-block-start: 3.5rem;
        inset-inline-start: var(--padding-inline);
        list-style: none;
        margin: 0;
        max-block-size: 73dvh;
        overflow-y: auto;
        padding: 0;
        position: absolute;
    }
    
    .chapter-toc-section { display: block; padding: 0.5rem 1rem 0.3rem; }
    .chapter-toc-section:hover { background: var(--bg-light-emphasis); }

/* 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;
    margin-block-end: 1rem;
    overflow: auto;
}

/* Timeline */
#figs-timeline { height: 20rem; }

/* Typography */
.caps { letter-spacing: 0.06em; text-transform: uppercase; }
.caslon { font-feature-settings: "clig", "dlig", "kern", "liga", "onum"; font-size: 1.1em; line-height: 1; }
.dropcap { float: left; line-height: 0.8; }
.dropcap.primary { font-size: 5.5em; margin: 0.14em 0.1em -0.3em 0; }
.dropcap.secondary { font-size: 3.4em; margin: 0.15em 0.1em -0.3em 0; }

.q-stroke {
    border: 1px solid var(--contrast-main);
    border-width: 1px 0;
    display: inline-block;
    line-height: 0.5;
    padding-block-start: 0.15em;
}

.p-stroke {
    border-block-start: 1px solid var(--contrast-main);
    display: inline-block;
    line-height: 0.5;
    padding-block-start: 0.15em;
}

.scaps { font-style: normal; font-variant: small-caps; }
.svg-sym { block-size: 0.8em; vertical-align: -0.1em; }
    
    /* Lists */
    .lower-alpha { list-style: lower-alpha; }
    .lower-roman { list-style: lower-roman; }
    .upper-roman { list-style: upper-roman; }
    
    /* Stacked letters */
    .stacked { position: relative; }
    
    .stacked .sup {
        inset-block-start: -0.8em;
        inset-inline-start: 50%;
        font-size: calc(var(--font-small) / var(--font-scale));
        position: absolute;
        transform: translateX(-50%);
    }
    
    /* Variations */
    .variations { display: flex; margin: 2rem auto; inline-size: 19em; }
    .variations li { margin-block-end: 1em; }
    .variations ul { list-style: none; margin: 0 1rem; }


/* Widths
==================================================*/

@media screen and (max-width: 1300px) {
    :root {
        --grid: repeat(20, 1fr);
    }
    
    /* Cover */
    .cover-title { grid-column: 1 / -1; }
    
    /* Features */
    .feature-illustrations .feature-copy { grid-column: 1 / span 10; }
    .feature-illustrations .feature-media { grid-column: 10 / span 10; }
    .feature-posters .feature-copy { grid-column: 10 / span 10; }
    .feature-posters .feature-media { grid-column: 1 / span 10; }
    
    /* Figures */
    .fig-callout-narrow { display: block; }
    .fig-callout-narrow .fig-thumb { block-size: auto; max-block-size: 80vh; margin-block-end: 2rem; }
    .fig-callout-narrow .fig-thumb img { block-size: auto; max-block-size: 80vh; inline-size: auto; }
    
    /* Footer */
    .colophon { display: block; text-align: center; }
    .footer { display: block; }
    
    /* Header */
    .header { padding-block-start: 0.333rem; padding-block-end: 0.333rem; }
    
        /* Logo */
        .logo-mark { block-size: 2.325rem; font-size: var(--font-small); inline-size: 2.325rem; }
        .logo-title { margin: 0; padding-block-start: 0.4em; }
        
        /* Navigation */
        .menu {
            background: var(--bg-main);
            box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
            display: none;
            inline-size: 100%;
            inset-block-start: 2.8rem;
            inset-inline-start: 0;
            max-height: calc(100dvh - 2.8rem);
            overflow-y: auto;
            position: absolute;
        }
        
        .menu-button { display: block; }
        .nav.open .menu { display: block; z-index: 100; }
        .nav-item { display: block; font-size: var(--font-base); padding: 1em 1em 0.5em; }
        .nav-pages { display: block; }
        .nav-pages > li { margin: 0; }
        
            /* Chapters */
            .chapters-menu {
                background: none;
                box-shadow: none;
                display: block;
                max-height: none;
                overflow-y: initial;
                padding: 0;
                position: static;
            }
            
            .chapters-menu-close { display: none; }
            .chapters-menu-extras { display: block; text-transform: uppercase; }
            .chapters-menu-extras a { display: block; padding: 1em 1em 0.5em; }
            .chapters-menu-extras li { margin: 0; }
            #chapters-menu-button { display: none; }
    
    /* Illustrations */
    .illustration-details { display: block; }
    
    .illustration-details h1,
    .illustration-figure,
    .illustration-subtitle,
    .illustration-year {
        text-align: center;
    }
    
    .illustration-media { padding: 1rem 3rem; }
    
    /* Table of contents */
    .toc { grid-template-columns: repeat(3, 1fr); }
    .toc a { padding: 0.7rem; }
    .toc-num { font-size: var(--font-large); }
    .toc-title { font-size: var(--font-base); }
    
        /* Chapter */
        .chapter-toc {
            background: var(--bg-light-emphasis);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            inset-block-start: 0;
        }
        
        .chapter-toc-button { position: static; }
        .chapter-toc-button-label { display: inline-block; }
        .chapter-toc-list { inset-block-start: 2.5rem; inline-size: 100vw; inset-inline-start: 0; }
    
    /* Timeline */
    .timeline::before { inset-inline-start: calc(19.8% + 20px); }
    .timeline-details { row-gap: 0; }
    .timeline-figs { grid-column: 6 / -1; grid-row: 3; }
    .timeline-media { grid-column: 6 / span 7; margin-block-end: 0.3rem; }
    .timeline-title { grid-column: 6 / -1; grid-row: 2; }
    .timeline-year { grid-column: 1 / span 4; padding: 0; }
    .timeline-year::after { inset-inline-end: -1.9rem; }
}

@media screen and (max-width: 900px) {
    /* Archives */
    .archives { column-count: 1; }
    
    /* Blocks */
    .block-narrow { grid-column: 2 / -2; }
    
    /* Chapter covers */
    .chapter-cover { background: none; display: block; padding: 0; }
    .chapter-cover::after { display: none; }
    .chapter-cover img { block-size: 30vh; position: static; }
    .chapter-cover-content { box-shadow: none; padding: var(--padding-block) var(--padding-inline); }
    
    /* Features */
    .feature { display: block; }
    .feature-media { margin-block-end: 2rem; }
    .feature-copy, .feature-media { position: relative; }
    
    /* Footer */
    .footer-chapters { column-count: 1; }
    
    /* Header */
    .chapters-menu-list { column-count: 1; }
    
    /* Illustrations */
        /* Grid */
        .illustrations { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    
    /* Sources */
    .sources-byline { line-height: 1.5; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    :root {
        --font-base: 20px;
        --font-scale: 1.125;
        --padding-inline: 0.625rem;
    }
    
    /* Blocks */
    .block-narrow, .block-wide { grid-column: 1 / -1; }
    
    /* Fancybox */
    .f-caption { padding: 1rem; }
    
    /* Footer */
    .footer-chapters-extras { display: block; }
    .footer-chapters-extras li { margin-block-end: 0.5em; }
    
    /* Illustrations */
    .illustrations-tools { display: block; }
    
        /* Filters */
        .filters.open { display: block; }
        .filters-list { margin-block-end: 1em; }
    
    /* Table of contents */
    .toc { grid-template-columns: repeat(2, 1fr); }
    .toc a { padding: 1rem; }
    .toc-front-matter { display: block !important; grid-column: 1 / -1; }
    
        /* Chapter */
        .chapter-toc {
            background: var(--bg-light-emphasis);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            inset-block-start: 0;
        }
        
        .chapter-toc-button { position: static; }
        .chapter-toc-button-label { display: inline-block; }
        .chapter-toc-list { inline-size: calc(100vw - 2rem); inset-inline-start: 1rem; }
    
    /* Timeline */
    .timeline::before { inline-size: 0.2rem; inset-inline-start: calc(20.5%); }
    .timeline-media { grid-column: 6 / -1; }
    .timeline-year { grid-column: 1 / span 4; }
    
    .timeline-year::after {
        block-size: 0.8rem;
        inline-size: 0.8rem;
        inset-inline-end: -1rem;
        transform: translateY(-71%);
    }
}


.bookmark { background: var(--accent); color: #fff; display: flex; justify-content: center; margin: 3rem 0; padding: 2rem; }

.todo { background: yellow; }