/*---------------------------------+
 | Site: Roses & Lilies of Redoute |
 +---------------------------------*/


/* Imports
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
@import url(/styles/reset.css);


/* Basics
==================================================*/
:root {
    /* Colors */
    --bg: #334541;
    --bg-dark: #242F2C;
    --flower-dark: #292929;
    --flower-light: #fff;
    
    /* 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)
    ;
    
    /* Typography */
    --font-family: "Literata", serif;
    --font-family-display: cursive;
    
    /* Font sizes */
    --font-size-base: 20px;
    --font-size-xxxl: 7.479rem;
    --font-size-xxl: 5.611rem;
    --font-size-xl: 4.209rem;
    --font-size-l: 1.777rem;
    --font-size-m: 1.333rem; /* Scale */
    --font-size-s: 0.9rem;
    
    color-scheme: dark;
}

a { text-decoration: underline; }
a:hover { text-decoration: none; }
blockquote { border-left: 2px solid rgba(255, 255, 255, 0.2); padding-left: 2rem; }
blockquote, p, ol, ul { margin-block-end: 1em; }

body {
    background: var(--bg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: 1.6;
}

body, body a { color: #fff; }
cite, em { font-style: italic; }

h1 {
    font-size: var(--font-size-xl);
    font-weight: bold;
    line-height: 1.1;
    margin-block-end: 1rem;
}

h2 {
    font-size: var(--font-size-l);
    font-weight: bold;
    line-height: 1.1;
    margin: 1em 0 0.5em;
}

h3 {
    font-size: var(--font-size-m);
    font-weight: bold;
    line-height: 1.1;
    margin: 1em 0 0.5em;
}

h4 {
    font-size: var(--font-size-base);
    font-weight: bold;
    margin: 1em 0 0.5em;
}

hr { background: rgba(255, 255, 255, 0.2); border: 0; clear: both; color: rgba(255, 255, 255, 0.2); height: 1px; margin: 3rem 0; }
img { max-inline-size: 100%; }
li { margin-block-end: 0.5em; }
ol { list-style-type: decimal; margin-inline-start: 2rem; }
ol ol, ul ul { margin-block-end: 0.5em; }
section { padding: 5vw; }
strong { font-weight: bold; }
sup { font-size: 0.8em; padding-inline-start: 0.2em; vertical-align: super; }
ul { list-style-type: disc; margin-inline-start: 2rem; }


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

/* Action buttons */
.action {
    border-radius: 100rem;
    display: inline-block;
    font-size: var(--font-size-m);
    padding: 0.6em 1.5em 0.7em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    white-space: nowrap;
}

.action:hover { background: rgba(255, 255, 255, 0.2); color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
.action-primary { background: #fff; color: #000; }
.action-secondary { background: rgba(255, 255, 255, 0.2); }

/* Banners */
.banner { margin: 0 -5vw -3vw; padding-block-start: 5vw; }
.banner img { display: block; inline-size: 100%; }
.banner-2 { display: flex; }
.banner-2 img { flex: 1 1 auto; height: 70vh; object-fit: cover; }

/* Blocks */
.block { column-gap: 1rem; display: grid; grid-template-columns: repeat(7, 1fr); }
.block-feature > * { grid-column: 2 / span 2; }
.block-narrow { position: relative; }
.block-narrow > * { grid-column: 2 / span 3; }
.block-wide > * { grid-column: 2 / -2; }
.block-narrow .block-media { grid-column: 5 / span 2; grid-row: 2; padding-inline-start: 2rem; }

/* Browsing */
    /* Navigation */
    .browse-nav { align-items: flex-start; display: flex; justify-content: space-between; }
    
    .browse-nav nav {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 100rem;
        line-height: 1;
        margin: 1rem 0;
        padding: 0.5rem;
    }
    
    .browse-nav a {
        border-radius: 100rem;
        display: block;
        padding: 0.7em 1.2em 0.8em;
        text-decoration: none;
        transition: all 0.1s ease-in-out;
        white-space: nowrap;
    }
    
    .browse-nav a:hover { background: rgba(255, 255, 255, 0.2); }
    .browse-nav .current a { background: #fff; color: #000; }
    .browse-nav li { margin: 0; }
    .browse-nav ul { display: flex; gap: 0.3rem; justify-content: center; list-style: none; margin: 0; }

/* Collages */
.collage { border-block-start: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.collage path { cursor: pointer; }

.collage-hover {
    display: none;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    position: absolute;
}

.collage-small { display: none; }
.collage-targets { fill: transparent; inline-size: 100%; inset-block-start: 0; inset-inline-start: 0; position: absolute; }

/* Cover */
.cover { font-style: italic; padding: 0; position: relative; text-align: center; }

.cover a {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    padding: 9vw 0;
    text-decoration: none;
}

.cover a:hover .cover-title {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 0, 0, 1);
}

.cover li { margin: 0; overflow: hidden; }

.cover ul {
    background: rgba(255, 255, 255, 0.2);
    gap: 1px;
    display: grid;
    grid-template-columns: 50% 50%;
    list-style: none;
    margin: 0;
}

.cover-lilies { background-image: url(/images/redoute/cover-lilies.jpg); }
.cover-roses { background-image: url(/images/redoute/cover-roses.jpg); }

.cover-title {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-width: 1px 0;
    display: block;
    font-weight: bold;
    inline-size: 100%;
    padding: 3vw 2vw;
    transition: all 0.1s ease-in-out;
}

.cover-title-primary {
    display: block;
    font-size: 8vmin;
    line-height: 0.7;
    margin-block-end: 3vmin;
}

.cover-title-secondary { display: block; font-size: 5vmin; line-height: 1; }
.cover-title-tertiary { display: block; font-size: 4vmin; line-height: 1; }
    
    /* Subcovers */
    .subcover { background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); overflow: hidden; position: relative; }
    
    .subcover-about-media {
        block-size: 100%;
        -webkit-filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
        filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
        inline-size: 60%;
        inset-block-start: 0;
        inset-inline-start: 47%;
        object-fit: cover;
        object-position: 50% 30%;
        position: absolute;
    }

/* Fancybox */
.fancybox__image { background: var(--flower-dark); padding: 2rem; }
[data-theme="dark"] .fancybox__image { background: var(--flower-dark); }
[data-theme="light"] .fancybox__image { background: var(--flower-light); }

/* Flower */
.flower {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

.flower-bg {
    background-position: 50% 20%;
    background-size: 200%;
    background-repeat: no-repeat;
    block-size: 100vh;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    mix-blend-mode: multiply;
    opacity: 0.2;
    position: fixed;
    z-index: 0;
}

    /* Cover */
    .flower-cover { background: var(--flower-dark); block-size: 80vh; position: relative; }
    .flower-cover .actions { display: flex; gap: 1rem; list-style: none; margin: 2rem 0 0; }
    .flower-cover sup { font-size: 3vmin; margin: 0; }
    
    .flower-cover-bg {
        background-position: 50% 50%;
        background-size: 150%;
        background-repeat: no-repeat;
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
        z-index: 0;
    }
    
    .flower-cover-title {
        background: linear-gradient(to right,  rgba(41,41,41,1) 10%,rgba(41,41,41,0) 70%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        block-size: 100%;
        padding: 3vw 40% 6vw 10vw;
        position: relative;
        z-index: 1;
    }
    
    .flower-cover-title h1, .flower-cover-title-subtitle, .flower-cover-title-var, .flower-cover-title-subtitle-var {
        -webkit-filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
        filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
    }
    
    .flower-cover-title h1 { font-size: 10vmin; line-height: 1.05; margin: 0 0 0.1em; }
    .flower-cover-title-var { font-size: 5vmin; font-weight: bold; line-height: 1.1; }
    
    .flower-cover-title-subtitle {
        font-size: 3vmin;
        font-style: italic;
        font-weight: normal;
        line-height: 1.3;
        margin: 0.2em 0 0;
    }
    
    .flower-cover-title-subtitle-var { display: block; font-size: 2vmin; font-style: italic; }
    .flower-cover-type { margin: 0; text-transform: uppercase; }
    
        /* Navigation */
        .flower-nav a {
            align-items: center;
            block-size: 100%;
            display: flex;
            font-size: var(--font-size-xxl);
            line-height: 1;
            inline-size: 10vw;
            inset-block-start: 0;
            justify-content: center;
            opacity: 0.8;
            padding: 0 0 4vw;
            position: absolute;
            text-decoration: none;
            z-index: 1;
        }
        
        .flower-nav a:hover {
            -webkit-filter: drop-shadow(0 0 18px rgba(0, 0, 0, 1));
            filter: drop-shadow(0 0 18px rgba(0, 0, 0, 1));
            opacity: 1;
        }
        
        .flower-nav-next { inset-inline-end: 0; }
        .flower-nav-prev { inset-inline-start: 0; }
    
    /* Description */
    .flower-description {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
        grid-column: 5 / -1;
        padding: 5vw;
    }
    
    .flower-description h2:first-child { margin-block-start: 0; }
    
    /* Plate */
    .flower-plate {
        align-self: start;
        block-size: 95vh;
        grid-column: 1 / 5;
        padding: 5vw 10vw 6vw;
        position: sticky;
        top: 0;
    }
    
        /* Actions */
        .flower-plate-actions {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 0;
        }
        
        /* Media */
        .flower-plate-media { block-size: 100%; display: block; inline-size: 100%; position: relative; }
        
        .flower-plate img {
            block-size: 100%;
            inline-size: 100%;
            object-fit: contain;
            padding: 3rem;
            transition: all 0.1s ease-in-out;
        }
        
        .flower-plate[data-theme="dark"] img {
            background: var(--flower-dark);
            border: 2rem solid rgba(0, 0, 0, 0.25);
        }
        
        .flower-plate[data-theme="light"] img {
            background: var(--flower-light);
            border: 2rem solid rgba(0, 0, 0, 0.1);
        }
        
        .flower-plate[data-theme="dark"] .flower-plate-num { color: #fff; }
        .flower-plate[data-theme="light"] .flower-plate-num { color: #000; }
        
        .flower-plate-num {
            font-size: var(--font-size-s);
            inset-block-start: 3rem;
            inset-inline-end: 3.3rem;
            opacity: 0.6;
            position: absolute;
        }
        
        /* Theme */
        .flower-plate-theme { display: flex; list-style: none; margin: 0; }
        .flower-plate-theme a { display: inline-block; }
        
        .flower-plate-theme [data-theme="dark"] span {
            background: var(--flower-dark);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        .flower-plate-theme [data-theme="dark"].current span { border-color: #fff; }
        .flower-plate-theme [data-theme="dark"].current span::after { border-color: #fff; }
        
        .flower-plate-theme [data-theme="light"] span {
            background: var(--flower-light);
            border: 2px solid rgba(0, 0, 0, 0.2);
        }
        
        .flower-plate-theme [data-theme="light"] span { border-color: #000; }
        .flower-plate-theme [data-theme="light"].current span::after { border-color: #000; }
        
        .flower-plate-theme li { margin: 0 0.5rem 0; }
        
        .flower-plate-theme span {
            block-size: 1.9rem;
            border-radius: 100%;
            display: inline-block;
            inline-size: 1.9rem;
            position: relative;
        }
        
        .flower-plate-theme span::after {
            border: 2px solid transparent;
            block-size: 0.3em;
            border-width: 0 0 2px 2px;
            content: "";
            inline-size: 0.65em;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            position: absolute;
            transform: translate(-50%, -65%) rotate(-45deg);
        }
        
        /* Tools */
        .flower-plate-tools {
            display: flex;
            inline-size: 100%;
            inset-block-end: 3vw;
            inset-inline-start: 0;  
            justify-content: space-between;
            padding: 0 10vw;
            position: absolute;
        }
    
    /* Slides */
    .flower-slides {
        block-size: 100%;
        box-shadow:
            0px 0.6px 2.2px rgba(0, 0, 0, 0.087),
            0px 1.4px 5.3px rgba(0, 0, 0, 0.125),
            0px 2.6px 10px rgba(0, 0, 0, 0.155),
            0px 4.7px 17.9px rgba(0, 0, 0, 0.185),
            0px 8.8px 33.4px rgba(0, 0, 0, 0.223),
            0px 21px 80px rgba(0, 0, 0, 0.31)
        ;
        inline-size: 100%;
    }
    
    .flower-slides .slick-list, .flower-slides .slick-track { block-size: 100%; }
    
    .flower-slides .slick-next, .flower-slides .slick-prev {
        block-size: var(--font-size-xl);
        inline-size: var(--font-size-xl);
    }
    
    .flower-slides .slick-next { inset-inline-end: calc(-1 * var(--font-size-xl)); }
    .flower-slides .slick-prev { inset-inline-start: calc(-1 * var(--font-size-xl)); }
    .flower-slides .slick-next::before { content: "›"; }
    .flower-slides .slick-next::before, .flower-slides .slick-prev::before { font-size: var(--font-size-xl); }
    .flower-slides .slick-prev::before { content: "‹"; }

/* Footer */
    .footer {
        align-items: center;
        background: var(--bg-dark);
        border-block-start: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        padding: 1rem 2rem;
        position: relative;
    }
    
    .footer p { margin: 0; }

/* Footnotes */
.footnotes { font-size: var(--font-size-s); margin-block-start: 2rem; }
.footnotes p { margin-block-end: 0.5em; }

/* Timeline */
.gallery-section { border-block-start: 1px solid rgba(255, 255, 255, 0.2); margin: 5vw 0; }

.gallery-section h2 {
    font-size: var(--font-size-xl);
    font-weight: normal;
    margin: 4rem 0;
    text-align: center;
}

.gallery-section-subhead { display: block; font-size: var(--font-size-l); }

/* Header */
.header {
    align-items: center;
    background: var(--bg-dark);
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.header a { color: #fff; text-decoration: none; }

    /* Brand */
    .brand { font-family: var(--font-family); font-size: var(--font-size-l); font-style: italic; line-height: 1; }
    .brand span { font-weight: 800; }
    
    /* Menu */
    .menu a { border-radius: 0.3em; display: inline-block; padding: 0.3em 0.7em; }
    .menu a:hover { background: rgba(255, 255, 255, 0.1); }
    .menu .current { font-style: italic; font-weight: bold; }
    .menu .current a { background: rgba(255, 255, 255, 0.2); }
    .menu li { margin: 0; }
    .menu-button { display: none; line-height: 1; }
    .menu-pages { display: flex; list-style: none; margin: 0; }

/* Home */
.home .flower-cover { block-size: 65vh; }

/* Intro */
.intro { font-size: var(--font-size-l); }

/* Lists */
.lower-alpha { list-style-type: lower-alpha; }
.lower-greek { list-style-type: lower-greek; }
.upper-alpha { list-style-type: upper-alpha; }
.upper-roman { list-style-type: upper-roman; }

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

/* Nomenclature */
.classification { font-style: italic; }
.nomenclature { border: 1px solid rgba(255, 255, 255, 0.2); border-width: 1px 0; margin: 2rem 0; padding: 2rem 0; }

/* Posters */
.poster {
    border: 1rem solid #fff;
    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-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 li { margin-block-end: 0.3em; }
.refs ul { list-style-type: none; margin-inline-start: 0; padding-inline-start: 1rem; text-indent: -1rem; }
.refs ul ul { margin-block-end: 0; }

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

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

.thumbs a {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.3rem;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    position: relative;
}

.thumbs a:hover { background: rgba(255, 255, 255, 0.05); }

.thumbs a:hover .thumbs-img img {
    -webkit-filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
    transform: translate(-50%, -50%) scale(1.1);
}

.thumbs a:hover .thumbs-num { opacity: 1; }
.thumbs li { margin: 0; }

.thumbs-bg {
    block-size: 100%;
    filter: blur(4px) grayscale(1);
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    mix-blend-mode: multiply;
    object-fit: cover;
    object-position: 50% 20%;
    opacity: 0.3;
    position: absolute;
    transform: scale(300%);
    z-index: 0;
}

.thumbs-img {
    display: block;
    margin-block-end: 0.5rem;
    transition: all 0.2s ease-in-out;
    padding: 110% 0 33%;
    position: relative;
}

.thumbs-img img {
    block-size: 70%;
    display: block;
    -webkit-filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
    inline-size: 80%;
    inset-block-start: 45%;
    inset-inline-start: 50%;
    object-fit: contain;
    object-position: 50% 40%;
    position: absolute;
    transition: all 0.2s ease-in-out;
    transform: translate(-50%, -50%);
}

.thumbs-num {
    font-size: var(--font-size-m);
    inset-block-start: 0.4em;
    inset-inline-end: 0.7em;
    opacity: 0.5;
    position: absolute;
}

.thumbs-title {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0) 1%,rgba(0, 0, 0, 0.2) 100%);
    font-size: var(--font-size-m);
    font-style: italic;
    display: block;
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
    padding: 1em 1em 1.5em;
    position: absolute;
    transition: all 0.1s ease-in-out;
}

.thumbs-var { display: block; font-size: var(--font-size-s); }

/* Translation */
.translate { background: var(--bg-dark); border-radius: 0.3rem; padding: 1.5rem 2rem; }
.translate summary { font-weight: bold; }

/* Volumes */
.volumes {
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    list-style: none;
    margin: 2rem 0 4rem;
    padding-block-start: 1rem;
}

.volumes a {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.volumes img { transition: all 0.1s ease-in-out; }
.volumes a:hover img { transform: scale(1.2); }


/* Widths
==================================================*/
@media screen and (max-width: 1200px) {
    .flower-title h1 { font-size: var(--font-size-l); }
    .flower-title-translated { font-size: var(--font-size-base); }
}

@media screen and (max-width: 1000px) {
    /* Banners */
    .banner-2 { flex-direction: column; }
    .banner-2 img { height: 50vh; }
    
    /* Blocks */
    .block-narrow { display: block; }
    .block-narrow .block-media { padding: 0; margin-block-end: 2rem; }
    .block-feature > * { grid-column: 1 / span 4; }
    
    /* Browsing */
        /* Navigation */
        .browse-nav { display: block; text-align: center; }
    
    /* Covers */
    .cover a { padding: 20vmin 0; }
    .cover ul { display: block; }
    
        /* Subcovers */
        .subcover-about-media { inset-inline-start: 48%; object-position: 50% 50%; object-fit: contain; }
    
    /* Flowers */
    .flower { display: block; }
    
        /* Cover */
        .flower-cover-title {
            background: linear-gradient(to bottom,  rgba(41,41,41,0) -1%,rgba(41,41,41,0) 0%,rgba(41,41,41,1) 80%);
            block-size: auto;
            inline-size: 100%;
            inset-block-end: 0;
            padding: 10vmin 10vw 5vmin;
            position: absolute;
        }
        
        .flower-cover-title h1 { margin-block-end: 0.1em; }
        
            /* Navigation */
            .flower-nav a {
                block-size: auto;
                font-size: var(--font-size-xl);
                inline-size: 1em;
                inset-block-end: 0;
                inset-block-start: unset;
                padding: 0 0 16vw;
            }
        
        /* Plates */
        .flower-plate { block-size: 65vh; padding-bottom: 4rem; position: relative; }
        .flower-plate img { border-width: 0.5rem; padding: 1rem; }
    
    /* Header */
    .brand { font-size: var(--font-m); }
    .header { padding: 0.5rem 1rem; }
    
    .menu {
        background: var(--bg);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        display: none;
        inline-size: 100%;
        inset-block-start: 3.4rem;
        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.8rem 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; }
    
    /* Home */
    .home { display: block; }
    
    /* Intro */
    .intro { font-size: var(--font-size-m); }
    
    /* Thumbs */
    .thumbs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    
    /* Timeline */
    .timeline-volume { display: block; }
}

@media screen and (max-width: 700px) {
    /* Basics */
    :root {
        --font-size-base: 16px;
        --font-size-xl: 3.052rem;
        --font-size-l: 1.953rem;
        --font-size-m: 1.25rem; /* Scale */
    }
    
    /* Content */
        /* Browse */
        .browse-nav a { padding: 0.5em 0.7em 0.6em; }
        
        /* Blocks */
        .block { display: block; }
        
        /* Collages */
        .collage-large { display: none; }
        .collage-small { display: block; }
        
        /* Cover */
        .cover-title-primary { font-size: 19vmin; }
        .cover-title-secondary { font-size: 13.5vmin; }
        .cover-title-tertiary { font-size: 11vmin; }
        
            /* Subcovers */
            .subcover { text-align: center; }
            .subcover-about-media { position: static; }
        
        /* Footer */
        .footer { display: block; font-size: var(--font-size-s); text-align: center; }
        .footer p { margin-block-end: 0.5em; }
        
        /* Posters */
        .poster-list { display: block; }
        .poster-list li { inline-size: 100%; }
        
        /* Thumbs */
        .thumbs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
        
        /* Volumes */
        .volumes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}