/*---------------------+
 | Site: Humming-Birds |
 +---------------------*/

/* Imports
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Vidaloka&display=swap');
@import url(/styles/reset.css);
@import url(/styles/fontawesome.css);


/* Basics
==================================================*/
:root {
    /* Colors */
    --bg: #fffdf8;
    --border-color: rgba(65, 61, 51, 0.2);
    --border: 1px solid var(--border-color);
    --contrast-main: #413d33;
    
    /* Font Families */
    --font-family-primary: "Vidaloka", serif;
    --font-family-secondary: "PT Serif", serif;
    --font-family-tertiary: "PT Sans", sans-serif;
    
    /* Font sizes */
    --font-xl: 4.209rem;
    --font-l: 1.777rem;
    --font-m: 1.333rem; /* Scale */
    --font-base: 20px;
    --font-s: 0.75rem;
    
    /* Grids */
    --gap: 2rem;
    --grid: repeat(12, 1fr);
    
    /* Shadows */
    --shadow: 0px 0.2px 0.3px rgba(0, 0, 0, 0.017),
        0px 0.5px 0.8px rgba(0, 0, 0, 0.024),
        0px 1px 1.5px rgba(0, 0, 0, 0.03),
        0px 1.8px 2.7px rgba(0, 0, 0, 0.036),
        0px 3.3px 5px rgba(0, 0, 0, 0.043),
        0px 8px 12px rgba(0, 0, 0, 0.06),
        0 -1px 0 rgba(0, 0, 0, 0.05)
    ;
    --shadow-hover: 0px 0.7px 1.4px rgba(0, 0, 0, 0.031),
        0px 1.7px 3.3px rgba(0, 0, 0, 0.044),
        0px 3.3px 6.1px rgba(0, 0, 0, 0.055),
        0px 5.8px 10.9px rgba(0, 0, 0, 0.066),
        0px 10.9px 20.5px rgba(0, 0, 0, 0.079),
        0px 26px 49px rgba(0, 0, 0, 0.11)
    ;
}

a {
    color: var(--contrast-main);
    text-decoration: underline;
    text-decoration-color: #000;
    transition: all 0.1s ease-in-out;
}

a:hover { text-decoration-color: transparent; }

body {
    background-color: var(--bg);
    background-image: url(/images/hummingbirds/mountains.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--contrast-main);
    font-family: var(--font-family-secondary);
    line-height: 1.7;
    position: relative;
}

blockquote { border-inline-start: var(--border); padding-inline-start: 2rem; }
blockquote, p, ol, ul { margin-block-end: 1rem; }
blockquote p:last-child { margin: 0; }
cite, em { font-style: italic; }
figure { margin: 3vw 0; }
figure img { display: block; inline-size: 100%; margin: 0 auto 1rem; mix-blend-mode: multiply; }
figcaption { font-family: var(--font-family-tertiary); font-size: var(--font-s); text-align: center; }
h1 { font-family: var(--font-family-primary); font-size: var(--font-xl); line-height: 1; margin-block-end: 0.5em; }
h1 em { font-size: var(--font-l); font-style: normal; font-weight: normal; margin-inline-start: 1rem; }
h2 { font-family: var(--font-family-primary); font-size: var(--font-l); line-height: 1.2; margin-block-end: 0.5rem; }
h3 { font-family: var(--font-family-primary); font-size: var(--font-m); margin-block-end: 0.5rem; }
html { font-size: var(--font-base); }
hr { background: var(--border-color); border: 0; clear: both; color: var(--border-color); height: 1px; margin: 2rem 0; }
img { max-inline-size: 100%; }
li { margin-block-end: 0.5em; }
ul { list-style-type: disc; margin-inline-start: 2rem; }
section { padding: 5vw 2rem; }
strong { font-weight: bold; }
sup { font-size: 0.8em; vertical-align: super; }


/* Content
==================================================*/
/* Actions */
.action {
    background: var(--contrast-main);
    border-radius: 10rem;
    color: #fff;
    display: inline-block;
    font-family: var(--font-family-tertiary);
    font-weight: bold;
    padding: 0.4em 2em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.action:hover { opacity: 0.7; }

/* Banners */
.banner { margin: 0; }
.banner img { display: block; inline-size: 100%; }
.banner figcaption { padding: 1em; text-align: end; }
.banner + section { padding-block-start: 2rem; }

/* Bird cover */
.bird-cover { block-size: 90vh; border-block-end: var(--border); display: flex; padding: 0; }

    /* Actions */
    .bird-cover-actions { display: flex; justify-content: center; list-style: none; margin: 0; }
    .bird-cover-actions li { margin: 0 1rem; }
    
    /* Media */
    .bird-cover-media img {
        block-size: 100%;
        inline-size: 100%;
        margin-block-end: 1rem;
        mix-blend-mode: multiply;
        object-fit: contain;
    }
    
    .bird-cover-media {
        display: flex;
        flex-direction: column;
        inline-size: 50%;
        padding: 5vw;
    }
    
    .bird-cover-none {
        align-items: center;
        block-size: 100%;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        font-style: italic;
        inline-size: 100%;
        justify-content: center;
        margin-block-end: 1rem;
    }
    
    .bird-cover-none img { block-size: 200px; display: block; }
    
    .bird-cover-thumb {
        block-size: 100%;
        cursor: zoom-in;
        display: block;
        flex: 1 1 auto;
        inline-size: 100%;
        margin-block-end: 1rem;
    }
    
    /* Title */
    .bird-cover-details { display: flex; list-style: none; }
    .bird-cover-details li { margin-inline-end: 1rem; }
    .bird-cover-details, .bird-cover-subfamily { margin: 0; }
    
    .bird-cover-subtitle {
        font-family: var(--font-family-primary);
        font-size: var(--font-l);
        margin: 0;
    }
    
    .bird-cover-title {
        color: #fff;
        display: flex;
        flex-direction: column;
        inline-size: 50%;
        justify-content: center;
        padding: 5vw;
    }
    
    .bird-cover-details a { color: #fff; text-decoration-color: #fff; }
    .bird-cover-detials a:hover { text-decoration-color: transparent; }
    .bird-cover-title h1 { margin: 0.5rem 0; }

/* Blocks */
.block { column-gap: var(--gap); display: grid; grid-template-columns: var(--grid); }
.block-aside a { display: block; }
.block-aside a:hover img { transform: translate(0, -10%) scale(1.2); }
.block-aside img { mix-blend-mode: multiply; transition: all 0.2s ease-in-out; }
.block-feature { align-items: center; }
.block-feature img { display: block; }
.block-feature-content { grid-column: 7 / span 4; }
.block-feature-media { grid-column: 2 / span 4; }
.block-feature-reversed .block-feature-content { grid-column-start: 2; grid-row: 1; }
.block-feature-reversed .block-feature-media { grid-column-start: 7; grid-row: 1; }
.block-narrow { position: relative; }
.block-narrow > * { grid-column: 3 / -3; }
.block-narrow .block-aside { grid-column: -3 / -1; grid-row-end: span 3; }
.block-narrow .block-head { grid-column: 2 / -1; margin-block-end: 2rem; }
.block-wide > * { grid-column: 2 / -2; }

/* Browse nav */
.browse-nav { display: flex; list-style: none; margin: 0 0 2rem; }
.browse-nav li { margin-inline-end: 1rem; }
.browse-nav li.current { font-weight: bold; }
.browse-nav li.current a { text-decoration: none; }

/* Fancybox */
.fancybox__backdrop { background: var(--bg) !important; opacity: 1 !important; }
.fancybox__carousel, .fancybox__carousel * { mix-blend-mode: multiply; }

/* Footer */
.footer {
    align-items: center;
    border-block-start: var(--border);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    position: relative;
}

.footer p { margin: 0; }

/* Genera */
.genera {
    display: grid;
    font-size: var(--font-l);
    gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
    list-style: none;
    margin: 0;
    padding: 2rem;
}

.genera a {
    background: #fff;
    block-size: 100%;
    border-radius: 1rem;
    font-family: var(--font-family-primary);
    box-shadow: var(--shadow);
    display: block;
    line-height: 1;
    padding: 1.5rem;
    text-decoration: none;
}

.genera a:hover { box-shadow: var(--shadow-hover); }
.genera img { display: block; margin-block-end: 0.5rem; inline-size: 100%; }
.genera li { margin: 0; }

    /* Sizes */
    .genus-t { grid-column-end: span 2; grid-row-end: span 2; }
    .genus-s { grid-column-end: span 3; grid-row-end: span 3; }
    .genus-m { grid-column-end: span 4; grid-row-end: span 4; }
    .genus-l { grid-column-end: span 5; grid-row-end: span 5; }
        

/* Header */
.header {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}
    
    /* Brand */
    .brand {
        align-items: center;
        display: flex;
        font-family: var(--font-family-primary);
        font-size: var(--font-l);
        line-height: 1;
        text-decoration: none;
        transition: all 0.1s ease-in-out;
        
    }
    
    .brand:hover img { transform: scale(1.8); }
    .brand:hover { color: rgba(0, 0, 0, 0.4); }
    
    .brand img {
        block-size: 2.3rem;
        display: block;
        margin-inline-end: 0.8em;
        max-inline-size: 3rem;
        mix-blend-mode: multiply;
        object-fit: contain;
        transform: scale(1.5);
        transition: all 0.1s ease-in-out;
    }
    
    /* Menu */
    .menu a { border-radius: 0.3em; display: inline-block; padding: 0.3em 0.7em; text-decoration-color: transparent; }
    .menu a:hover { background: rgba(0, 0, 0, 0.1); }
    .menu li.current { font-weight: bold; }
    .menu li { margin: 0; }
    .menu-button { display: none; line-height: 1; }
    .menu-pages { display: flex; list-style: none; margin: 0; }

/* Home */
.home .brand { display: none; }

.home .header {
    border: 0;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    justify-content: flex-end;
    position: absolute;
    z-index: 1;
}

.home-bg {
    block-size: 75vh;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 100%);
    mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent 100%);
    mix-blend-mode: multiply;
    position: absolute;
}

.home-bg img { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; }

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

/* Intro nav */
.intro-nav { align-items: center; display: flex; justify-content: center; }
.intro-nav a { background: #fff; border-radius: 1rem; box-shadow: var(--shadow); display: block; text-decoration: none; padding: 2rem 0; }
.intro-nav a:hover i { transform: scale(1.3); }
.intro-nav i { display: block; font-size: 4rem; margin-block-end: 0.5rem; transition: all 0.1s ease-in-out; }
.intro-nav li { flex: 0 0 auto; inline-size: calc(25% - 2rem); margin: 0 1rem 3rem; text-align: center; } 
.intro-nav ul { display: flex; flex-wrap: wrap; inline-size: 100%; justify-content: center; list-style: none; margin: 0; }

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

/* Overview */
.murmuration { display: block; inline-size: 95%; margin: 0 auto; mix-blend-mode: multiply; }
.overview { position: relative; }
.overview figure { margin: 1rem 0 0; }
.overview-container { padding-block-start: 0; }

    /* Sections */
    .overview-section-list {
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
    }
    
    .overview-section { align-items: center; display: grid; gap: var(--gap); grid-template-columns: var(--grid); }
    .overview-section img { mix-blend-mode: multiply; }
    
        /* Individual */
        .overview-title { block-size: 27.081%; }
        .overview-title .overview-content { grid-column: 1 / span 5; }
        .overview-illustrations { block-size: 23.097%; }
        .overview-illustrations .overview-content { grid-column: 7 / span 5; }
        .overview-intro { block-size: 22.802%; }
        .overview-intro .overview-content { grid-column: 2 / span 5; }
        .overview-about { block-size: 26.996%; }
        .overview-about .overview-content { grid-column: 7 / span 5; }
        
        
        .overview-about .overview-content,
        .overview-illustrations .overview-content,
        .overview-intro .overview-content {
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.95);
            border-radius: 2rem;
            box-shadow:
                0px 1.1px 1.9px -9px rgba(0, 0, 0, 0.042),
                0px 2.5px 4.5px -9px rgba(0, 0, 0, 0.061),
                0px 4.8px 8.5px -9px rgba(0, 0, 0, 0.075),
                0px 8.5px 15.2px -9px rgba(0, 0, 0, 0.089),
                0px 15.9px 28.4px -9px rgba(0, 0, 0, 0.108),
                0px 38px 68px -9px rgba(0, 0, 0, 0.15),
                0 -1px 0 rgba(0, 0, 0, 0.05)
            ;
            padding: 2.5rem;
        }
        
    
    /* Title */
    .overview .subtitle {
        display: block;
        font-family: var(--font-family-secondary);
        font-size: var(--font-m);
        line-height: 1.2;
        margin-block-end: 0.5em;
    }

/* Posters */
.poster {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    display: block;
    margin: 3rem 0;
    position: relative;
}

.poster:after {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.poster img { display: block; inline-size: 100%; mix-blend-mode: normal; }
.poster-light { border: 1rem solid var(--contrast-main); }
.poster-dark { border: 1rem solid #fff; }
.poster-list { display: flex; list-style: none; justify-content: space-between; margin-inline-start: 0; }
.poster-list li { flex: 0 0 auto; inline-size: 45%; }

/* References */
.refs { font-family: var(--font-family-tertiary); font-size: var(--font-s); line-height: 1.5; margin-block-end: 2rem; }
.refs li { margin-block-end: 0.3em; }
.refs ul { list-style-type: none; margin: 0; padding-inline-start: 1rem; text-indent: -1rem; }

/* Sections */
.section-divider { border-block-start: var(--border); }

/* Small caps */
.scaps { font-variant: small-caps; }

/* Species */
.species { list-style: none; margin: 0; }
.species > li { display: flex; }
.species .refs { margin-block-end: 0; }
.species-description { flex: 1 1 auto; padding-inline-start: 1rem; }
.species-habitat { margin: 0; }
.species-habitat + .refs { margin-block-start: 0.5rem; }
.species-name { margin: 0; }
.species-num { flex: 0 0 auto; inline-size: 2.5rem; text-align: end; }

.species-thumb {
    align-items: center;
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    display: flex;
    padding: 1rem;
    margin: 1rem 0;
    text-decoration: none;
}

.species-thumb img {
    block-size: 150px;
    inline-size: 150px;
    mix-blend-mode: multiply;
    object-fit: contain;
    transform: scale(1.5);
    transition: all 0.2s ease-in-out;
}

.species-thumb:hover { box-shadow: var(--shadow-hover); }
.species-thumb:hover img { transform: scale(1.8); }
.species-thumb-name-formal { display: block; font-weight: bold; }
.species-thumb-name-plain { display: block; }
.species-thumb-plate { display: block; font-family: var(--font-family-tertiary); font-size: var(--font-s); }
.species-thumb-title { margin-inline-start: 2rem; }

/* Thumbs */
.thumbs {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    line-height: 1.4;
    list-style: none;
    margin: 1rem 0;
    text-align: center;
}

.thumbs a { display: block; text-decoration: none; }
.thumbs a:hover .thumbs-img { background: none; box-shadow: none; }
.thumbs a:hover img { transform: translate(-50%, -55%) scale(1.4); }

.thumbs img {
    block-size: 10rem;
    display: block;
    inline-size: 100%;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    mix-blend-mode: multiply;
    object-fit: contain;
    object-position: 50% 50%;
    padding: 0.5rem;
    position: absolute;
    transform: translate(-50%, -50%) scale(1.2);
    transition: all 0.2s ease-in-out;
}

.thumbs-img {
    background: #fff;
    border-radius: 100%;
    box-shadow: var(--shadow);
    display: block;
    margin-block-end: 0.5rem;
    transition: all 0.2s ease-in-out;
    padding-block-start: 100%;
    position: relative;
}

.thumbs .placeholder img { transform: translate(-50%, -50%) scale(0.4); }
.thumbs .placeholder a:hover img { transform: translate(-50%, -55%) scale(0.6); }
.thumbs-subtitle, .thumbs-volume { display: block; font-family: var(--font-family-tertiary); font-size: var(--font-s); }
.thumbs-volume { font-style: italic; }

/* Timeline */
.timeline {
    height: 3rem;
    font-family: var(--font-family-tertiary);
    font-size: var(--font-s);
    margin-block-end: 2rem;
    position: relative;
}

    /* Ticks */
    .timeline-tick-decade, .timeline-tick-year { border-inline-start: 1px solid #000; position: relative; }
    .timeline-tick-decade { border-inline-start-width: 2px; }
    .timeline-tick-year { opacity: 0.2; }
    
    .timeline-tick-label {
        inset-block-end: 0;
        inset-inline-start: 50%;
        position: absolute;
        transform: translate(-50%, 110%);
    }
    
    .timeline-ticks {
        block-size: 100%;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        position: absolute;
    }
    
    .timeline-ticks { display: flex; justify-content: space-between; }
    
    /* Volumes */
    .timeline-pubs {
        block-size: 100%;
        border-block-start: 0;
        border-inline-start: 0;
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(38, 1fr);
        inline-size: 100%;
        list-style: none;
        margin: 0;
        position: absolute;
    }
    
    .timeline-volume { grid-row: 1; justify-content: flex-end; margin: 0; text-align: center; }
    
    .timeline-volume-bar {
        background: var(--contrast-main);
        block-size: 1rem;
        border-radius: 10rem;
        display: block;
        opacity: 0.9;
        text-indent: -1000rem;
    }
    
    .timeline-volume-label { display: block; font-weight: normal; }
    #timeline-vol-1 { grid-column: 1 / span 3; }
    #timeline-vol-1 .timeline-volume-bar { background: #B30917; }
    #timeline-vol-2 { grid-column: 4 / span 2; }
    #timeline-vol-2 .timeline-volume-bar { background: #C66135; }
    #timeline-vol-3 { grid-column: 6 / span 3; }
    #timeline-vol-3 .timeline-volume-bar { background: #988428; }
    #timeline-vol-4 { grid-column: 9 / span 3; }
    #timeline-vol-4 .timeline-volume-bar { background: #4F5F1B; }
    #timeline-vol-5 { grid-column: 12 / span 2; }
    #timeline-vol-5 .timeline-volume-bar { background: #2870D4; }
    #timeline-vol-s { grid-column: 32 / span 7; }
    #timeline-vol-s .timeline-volume-bar { background: #92719A; }


/* Widths
==================================================*/
@media screen and (min-width: 2000px) {
    .block-narrow > * { grid-column: 5 / -5; }
    .block-narrow .block-aside { grid-column: -5 / span 2; }
    .block-narrow .block-head { grid-column: 2 / span 2; }
}

@media screen and (max-width: 1300px) {
    /* Genera */
    .genera { font-size: var(--font-m); }
    .genera a { padding: 1rem; }
}

@media screen and (max-width: 1100px) {
    /* Basics */
    :root {
        --font-xl: 3.052rem;
        --font-l: 1.953rem;
        --font-m: 1.25rem; /* Scale */
        --font-base: 16px;
        --font-s: 0.8rem;
    }
    
    /* Content */
        /* Bird cover */
        .bird-cover { block-size: auto; display: block; }
        .bird-cover-details { display: block; }
        .bird-cover-details li { margin: 0; }
        .bird-cover-media, .bird-cover-title { display: block; inline-size: 100%; }
        
        /* Blocks */
        .block-narrow, .block-wide { display: block; }
        .block-narrow .block-aside { float: inline-end; inline-size: 30%; margin: 0 0 1rem 1rem; position: static; }
        
        /* Footer */
        .footer { display: block; font-size: var(--font-s); text-align: center; }
        
        /* Header */
        .brand { font-size: var(--font-m); padding: 0.7em 0.8em; }
        .header { padding: 0; }
        
        .menu {
            background: var(--bg);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            display: none;
            inline-size: 100%;
            inset-block-start: 2.7rem;
            inset-inline-start: 0;
            margin: 0;
            padding: 0;
            overflow-y: auto;
            position: absolute;
        }
        
        .menu a {
            border-block-end: 1px solid rgba(255, 255, 255, 0.2);
            display: block;
            padding: 0.5rem 2rem;
        }
        
        .menu li { margin: 0; }
        .menu.open { display: block; z-index: 100; }
        .menu-button { font-size: var(--font-m); padding: 0.7em 0.8em; }
        .menu-button, .menu-pages { display: block; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    section { padding-inline-end: 1rem; padding-inline-start: 1rem; }
    
    /* Content */
        /* Blocks */
        .block-feature { display: block; }
        .block-feature-media { margin-block-end: 1rem; }
        .block-narrow .block-aside { margin: 0 0 1rem 1rem; }
        
        /* Genera */
        .genera { gap: 1rem; grid-template-columns: repeat(2, 1fr); }
        .genera li { grid-column: auto / auto !important; grid-row: auto / auto !important; }
        
        /* Intro nav */
        .intro-nav { block-size: auto; display: block; }
        .intro-nav i { font-size: 2.5rem; }
        .intro-nav li { inline-size: calc(50% - 2rem); margin: 0 0.5rem 0.5rem; }
        
        /* Murmuration */
        .murmuration {
            block-size: 100%;
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
            -webkit-mask-image: linear-gradient(to bottom,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0.03) 6%,
                rgba(0,0,0,0.03) 18%,
                rgba(0,0,0,1) 25%,
                rgba(0,0,0,0.03) 31%,
                rgba(0,0,0,0.03) 44%,
                rgba(0,0,0,1) 50%,
                rgba(0,0,0,0.03) 56%,
                rgba(0,0,0,0.03) 69%,
                rgba(0,0,0,1) 75%,
                rgba(0,0,0,0.03) 82%,
                rgba(0,0,0,0.03) 94%,
                rgba(0,0,0,1) 100%
            );
            mask-image: linear-gradient(to bottom,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0.03) 6%,
                rgba(0,0,0,0.03) 18%,
                rgba(0,0,0,1) 25%,
                rgba(0,0,0,0.03) 31%,
                rgba(0,0,0,0.03) 44%,
                rgba(0,0,0,1) 50%,
                rgba(0,0,0,0.03) 56%,
                rgba(0,0,0,0.03) 69%,
                rgba(0,0,0,1) 75%,
                rgba(0,0,0,0.03) 82%,
                rgba(0,0,0,0.03) 94%,
                rgba(0,0,0,1) 100%
            );
            object-fit: cover;
            position: absolute;
        }
        
        .overview-container { padding: 0; }
        .overview-content { text-align: center; }
        
        .overview-section {
            align-items: center;
            block-size: 90vh;
            display: flex;
            justify-content: center;
            padding: 0 1rem;
        }
        
        .overview-section-list { position: relative; }
        
        /* Posters */
        .poster-list { display: block; }
        .poster-list li { inline-size: auto; }
        
        /* Species */
        .species > li { display: block; }
        .species-description { padding: 0; }
        
        .species-num {
            float: inline-start;
            font-weight: bold;
            inline-size: auto;
            margin-inline-end: 0.5em;
            text-align: start;
        }
        
        .species-thumb img { block-size: 70px; inline-size: 70px; }
        
        /* Thumbs */
        .thumbs { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
        .thumbs img { border-radius: 1.5rem; }
        
        /* Timeline */
        .timeline { block-size: 90vh; inline-size: 80%; margin: 2rem auto; }
        
            /* Ticks */
            .timeline-ticks { flex-direction: column; padding-inline-start: 3rem; }
            .timeline-tick-decade, .timeline-tick-year { border-block-start: 1px solid #000; border-inline-start: 0; }
            .timeline-tick-decade { border-block-start-width: 2px; }
            
            .timeline-tick-label {
                flex: 1 1 auto;
                inset-block-end: 50%;
                inset-inline-start: -3rem;
                margin-block-start: 1rem;
                transform: translate(0, 40%);
            }
            
            /* Volumes */
            .timeline-pubs { grid-template-columns: 1fr; grid-template-rows: repeat(38, 1fr); padding-inline-start: 40%; }
            .timeline-volume { align-items: center; display: flex; flex-direction: row-reverse; grid-column: 1 !important; }
            .timeline-volume-bar { block-size: 100%; flex: 0 0 auto; inline-size: 1rem; }
            .timeline-volume-label { margin-inline-start: 0.5rem; }
            #timeline-vol-1 { grid-row: 1 / span 3; }
            #timeline-vol-2 { grid-row: 4 / span 2; }
            #timeline-vol-3 { grid-row: 6 / span 3; }
            #timeline-vol-4 { grid-row: 9 / span 3; }
            #timeline-vol-5 { grid-row: 12 / span 2; }
            #timeline-vol-s { grid-row: 32 / span 7; }
}