/*==========================================================
    MASSIMO LARDI
    STYLE.CSS
    VERSION 2.0
==========================================================*/


/*==========================================================
    RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:"Inter",sans-serif;

    font-size:20px;
    line-height:1.8;

    color:var(--text);

    background:var(--paper);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}



/*==========================================================
    COLOUR PALETTE
==========================================================*/

:root{

    --paper:#282723;

    --paper-dark:#e7dfd2;

    --text:#f8cdbe;

    --heading:#ffffff;

    --olive:#6f7763;

    --gold:#ae9765;

    --stone:#817b72;

    --mist:#d8d0c4;

    --white:#ffffff;

    --max-width:1180px;

    --photo-brightness:1.1;
    --photo-contrast:1.03;
    --photo-saturation:1.00;

    --photo-overlay:rgba(35,36,40,.22);

}


/*==========================================================
    TYPOGRAPHY
==========================================================*/

h1,h2,h3{

    font-family:"Cormorant Garamond",serif;

    font-weight:500;

    color:var(--heading);

    line-height:1.1;

}

h1{

    font-size:5.5rem;

}

h2{

    font-size:3rem;

    margin-bottom:1.2rem;

}

h3{

    font-size:2rem;

    margin-bottom:.8rem;

}


p{

    margin-bottom:1.4rem;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    display:block;

    max-width:100%;

}


.reading-width{

    max-width:760px;

}


/*==========================================================
    LAYOUT
==========================================================*/

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}


section{

    position:relative;

}


/*==========================================================
    HEADER
==========================================================*/

header{

    position:fixed;

    left:0;
    top:0;

    width:100%;

    z-index:1000;

    transition:.45s;

    padding:1.2rem 0;

}


header.scrolled{

    background:rgba(0,0,0,.3);

    box-shadow:0 1px 12px rgba(0,0,0,.05);

}


.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.logo{

    font-family:"Inter", sans-serif;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#ffffff;

    transition:.3s;

}



/*==========================================
    NAVIGATION
==========================================*/

.menu{

    display:flex;

    list-style:none;

    gap:2rem;

}

.menu > li{

    position:relative;

}

nav a{

    display:block;

    color:#ffffff;

    font-size:.95rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:.3s;

}

nav a:hover{

    color:var(--olive);

}


/*==========================================
    DROPDOWNS
==========================================*/

.dropdown{

    position:absolute;

    top:100%;
    left:0;

    min-width:250px;

    list-style:none;

    padding:.9rem 0;

    background:rgba(0,0,0,.3);

    border:1px solid rgba(255,255,255,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

}

.dropdown li{

    width:100%;

}

.dropdown a{

    display:block;

    padding:.7rem 1.3rem;

    font-size:.88rem;

    letter-spacing:.08em;

    text-transform:none;

    white-space:nowrap;

}

.dropdown a:hover{

    background:rgba(255,255,255,.05);

    color:var(--gold);

}

.has-dropdown:hover .dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.menu > li:last-child .dropdown{

    left:auto;

    right:-2.5rem;

}





/*==========================================================
    MOBILE MENU BUTTON
==========================================================*/

.menu-toggle{

    display:none;

    cursor:pointer;

    font-size:2rem;

    line-height:1;

    transition:transform .2s ease;

}


/*==========================================================
    HERO
==========================================================*/

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}


/*==========================================================
    HERO LANDSCAPE
==========================================================*/

.hero-background{

    position:absolute;

    inset:0;

    background-image:url("images/massimolandscape1.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.08);

    filter:
        brightness(var(--photo-brightness))
        contrast(var(--photo-contrast))
        saturate(var(--photo-saturation));

}


/*==========================================================
    HERO COLOUR WASH
==========================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to bottom,

        rgba(30,31,34,.28) 0%,

        rgba(30,31,34,.22) 35%,

        rgba(30,31,34,.16) 60%,

        rgba(237,241,247,.12) 82%,

        rgba(237,241,247,.20) 100%

    );

}


/*==========================================================
    HERO TO PAPER TRANSITION
==========================================================*/

.hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:240px;

    background:

    linear-gradient(

        to bottom,

        rgba(40,39,35,0),

        rgba(40,39,35,.18),

        rgba(40,39,35,.45),

        rgba(40,39,35,.72),

        var(--paper)

    );

}


/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-content{

    position:relative;

    z-index:10;

    width:min(90%,900px);

}


.hero h1{

    color:white;

    margin-bottom:.5rem;

}


.hero .subtitle{

    font-family:"Inter",sans-serif;

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:.95rem;

    margin-bottom:2rem;

}


.hero .intro{

    width:min(90%,640px);

    margin:auto;

    font-size:1.2rem;

}


/*==========================================================
    BUTTONS
==========================================================*/

.button{

    display:inline-block;

    margin-top:2.5rem;

    padding:1rem 2rem;

    border:1px solid rgba(255,255,255,.5);

    color:white;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:.35s;

}


.button:hover{

    background:rgba(255,255,255,.1);

    color:#222;

}


/*==========================================================
    SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

}


.scroll-indicator span{

    display:block;

    width:2px;

    height:70px;

    background:white;

    opacity:.75;

    animation:scrollPulse 2.5s infinite;

}


/*==========================================================
    LANDSCAPE SECTIONS
==========================================================*/

.divider-image,
.parallax,
.closing-image{

    position:relative;

    height:65vh;

    overflow:hidden;

}


.landscape-background{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.03); 

    filter:
        brightness(var(--photo-brightness))
        contrast(var(--photo-contrast))
        saturate(var(--photo-saturation));

}


/*==========================================================
    INDIVIDUAL LANDSCAPES
==========================================================*/

.landscape-two{

    background-image:url("images/massimolandscape2.jpg");

}

.landscape-three{

    background-image:url("images/massimolandscape3.jpg");

}

.landscape-four{

    background-image:url("images/massimolandscape4.jpg");

} 

.hero-404{

    background-image:url("images/muro.jpg");

    filter:
        brightness(0.7)
        contrast(1.15)
        saturate(0.85);

}


/*==========================================================
    LANDSCAPE COLOUR WASH
==========================================================*/


.divider-image::before,
.parallax::before,
.closing-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--photo-overlay);

    z-index:1;

    pointer-events:none;

}


/*==========================================================
    LANDSCAPE TO PAPER TRANSITION
==========================================================*/

.divider-image::after,
.parallax::after,
.closing-image::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:180px;

    z-index:2;

    background:

    linear-gradient(

        to bottom,

        rgba(35,36,40,0),

        rgba(35,36,40,.20),

        rgba(35,36,40,.55),

        rgba(35,36,40,.82),

        var(--paper)

    );

}


/*==========================================================
    ANIMATIONS
==========================================================*/



@keyframes scrollPulse{

    0%{

        opacity:.2;
        transform:translateY(0);

    }

    50%{

        opacity:1;
        transform:translateY(12px);

    }

    100%{

        opacity:.2;
        transform:translateY(0);

    }

}

/*==========================================================
    LANDSCAPE HEIGHTS
==========================================================*/


.divider-image,
.parallax,
.closing-image{

    height:100vh;

}


/*==========================================================
    CONTENT SECTIONS
==========================================================*/

.welcome,
.content-section,
.books-section,
.projects,
.quotation{

    position:relative;

    background:var(--paper);

    padding:8rem 0;

}


.welcome{

    padding-top:9rem;

}


.content-section{

    padding-top:7rem;

}


.books-section{

    padding-top:8rem;

}


.projects{

    padding-top:8rem;

}


/*==========================================================
    SECTION HEADINGS
==========================================================*/

.section-title{

    text-align:center;

    margin-bottom:4rem;

}


.section-title p{

    width:min(92%,700px);

    margin:1rem auto 0;

    color:#7b746b;

}


/*==========================================================
    WELCOME
==========================================================*/

.welcome .reading-width{

    margin:auto;

    text-align:center;

}


.welcome p{

    font-size:1.18rem;

}


/*==========================================================
    NEW PUBLICATION
==========================================================*/

.new-publication{

    padding:8rem 0;

    background:var(--paper);

}


.new-publication-card{

    display:block;

    color:inherit;

    border-radius:8px;

    transition:
        transform .35s ease,
        background .35s ease;

}




.new-publication-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:5rem;

    align-items:center;

}

.new-publication-cover{

    display:flex;

    justify-content:center;

}

.new-publication-cover img{

    max-width:100%;

    max-height:520px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.new-publication-card:hover .new-publication-cover img{

    transform:translateY(-8px);

}



.publication-label{

    display:block;

    margin-bottom:1rem;

    font-size:.82rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--gold);

}

.new-publication-content h2{

    margin-bottom:1.5rem;

}

.new-publication-content p{

    max-width:620px;

}


.publication-link{

    display:inline-block;

    margin-top:1rem;

    font-size:.9rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--gold);

    transition:
        letter-spacing .3s ease,
        color .3s ease;

}


.new-publication-card:hover .publication-link{

    letter-spacing:.18em;

    color:var(--gold-dark);

}

.new-publication-card:hover h2{

    color:var(--gold-dark);

}




/*==========================================================
    ARTICLE GRID
==========================================================*/

.article-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:3rem;

}


.article-card{

    display:flex;

    flex-direction:column;

    border-top:1px solid #d1c8ba;

    padding-top:2rem;

}


.article-card h3{

    margin-bottom:1rem;

}


.article-card p{

    flex:1;

    color:#736d65;

}


.article-card a{

    margin-top:2rem;

    font-size:.9rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--olive);

}


.article-card:hover{

    transform:translateY(-6px);

}


.article-card:hover h3{

    color:var(--olive);

}




/*==========================================================
    PRESS LIST
==========================================================*/

.press-list{

    max-width:900px;

    margin:auto;

}


.press-item{

    border-top:1px solid rgba(255,255,255,.08);

    padding:2.8rem 0;

    transition:
        transform .35s ease,
        border-color .35s ease;

}


.press-item:last-child{

    border-bottom:1px solid rgba(255,255,255,.08);

}


.press-item a{

    display:block;

}


.press-author{

    font-size:.82rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:.8rem;

}


.press-item h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    line-height:1.25;

    color:var(--heading);

    margin-bottom:1rem;

    transition:color .35s ease;

}


.press-source{

    color:rgba(255,255,255,.65);

    font-size:1rem;

    line-height:1.7;

}


.press-link{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    margin-top:1.5rem;

    font-size:.82rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--gold);

}


.pdf-tag{

    border:1px solid var(--gold);

    padding:.18rem .45rem;

    border-radius:2px;

    font-size:.72rem;

    letter-spacing:.12em;

}


.press-item:hover{

    transform:translateX(8px);

}


.press-item:hover h3{

    color:var(--gold);

}

.press-more{

    display:flex;

    justify-content:center;

    margin-top:5rem;

}

.press-more a{

    display:inline-block;

    padding-top:1rem;

    font-size:.9rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--gold);

    transition:
        letter-spacing .3s ease,
        color .3s ease;

}

.press-more a:hover{

    letter-spacing:.18em;

}




/*==========================================================
    BOOK GRID
==========================================================*/

.book-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;

}

.book{

    text-align:center;

}

.book a{

    display:block;
    color:inherit;

}

.book-cover{

    aspect-ratio:2 / 3;

    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:1.8rem;

    background:#2f2d29;

    border:1px solid rgba(255,255,255,.08);

    border-radius:4px;

    margin-bottom:1.8rem;

    overflow:hidden;

}

.book-cover img{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.book h3{

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    line-height:1.25;

    color:var(--heading);

    transition:color .3s ease;

}

.book:hover img{

    transform:
        translateY(-8px)
        scale(1.02);

}

.book:hover h3{

    color:var(--gold);

}




/*==========================================================
    PUBLICATION GRID
==========================================================*/

.publication-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px,1fr));

    gap:3rem;

}


.publication{

    text-align:center;

}


.publication a{

    display:block;

}


.publication-cover{

    aspect-ratio: 2 / 3;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:1.2rem;

    background:#2f2d29;

    border:1px solid rgba(255,255,255,.08);

    border-radius:4px;

    margin-bottom:1.5rem;

    overflow:hidden;

}

.publication-cover img{

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.publication h3{

    font-family:"Cormorant Garamond",serif;

    font-size:1.45rem;

    line-height:1.3;

    color:var(--heading);

    transition:color .3s ease;

}


.publication:hover img{

    transform:
        translateY(-8px)
        scale(1.02);

}


.publication:hover h3{

    color:var(--gold);

}

/*==========================================================
    QUOTATION
==========================================================*/

.quotation{

    text-align:center;

}


blockquote{

    width:min(90%,900px);

    margin:auto;

    font-family:

        "Cormorant Garamond",
        serif;

    font-size:2.8rem;

    line-height:1.35;

    color:#4c463f;

}


blockquote footer{

    margin-top:2rem;

    font-family:"Inter",sans-serif;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#898176;

}


/*==========================================================
    PROJECTS
==========================================================*/

.project-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:3rem;

}


.project-grid article{

    padding:2rem;

    background:#f7f3ec;

    border:1px solid #d8d0c3;

}


.project-grid article:hover{

    border-color:#bfb49f;

    transform:translateY(-5px);

}


.project-grid h3{

    margin-bottom:1rem;

}


.project-grid p{

    color:#736d65;

}


/*==========================================================
    BUTTONS
==========================================================*/

.button-secondary{

    display:inline-block;

    margin-top:2rem;

    padding:.9rem 1.8rem;

    border:1px solid var(--olive);

    color:var(--olive);

    text-transform:uppercase;

    letter-spacing:.08em;

    transition:.35s;

}


.button-secondary:hover{

    background:var(--olive);

    color:white;

}


/*==========================================================
    FOOTER
==========================================================*/

footer{

    background:var(--paper);

    padding:5rem 0;

}


.footer-grid{

    display:grid;

    grid-template-columns:

        2fr 1fr 1fr;

    gap:3rem;

}


footer h3{

    font-size:1.6rem;

}


footer ul{

    list-style:none;

}


footer li{

    margin-bottom:.8rem;

} 


.footer-nav li{

    margin-bottom:.15rem;

}


.footer-nav{

    list-style:none;

}

.footer-heading{

    margin-top:.1rem;

}

.footer-heading:first-child{

    margin-top:0;

}

.footer-heading > a{

    font-size:.92rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--heading);

}

.footer-child{

    margin-left:1.25rem;

    margin-bottom:.15rem;


}

.footer-child a{

    font-size:.92rem;

    color:rgba(255,255,255,.72);

    text-transform:uppercase;

    letter-spacing:.08em;

}


footer a{

    transition:.3s;

}


footer a:hover{

    color:var(--olive);

}


.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid #cdc3b4;

    text-align:center;

    color:#7d766d;

    font-size:.9rem;

}


/*==========================================================
    GENERAL SPACING
==========================================================*/

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.text-centre{

    text-align:center;

}





/*==========================================================
    INDIVIDUAL BOOK PAGES
==========================================================*/

.book-detail{

    padding:8rem 0;
    background:var(--paper);

}

.book-detail-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:5rem;

    align-items:start;

}

.book-detail-cover{

    display:flex;

    justify-content:center;

    align-self:start;

}

.book-detail-cover img{

    max-width:100%;

    max-height:520px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);

}

.book-detail-content h2{

    margin-top:0;

    margin-bottom:1rem;

}

.book-detail-content p{

    max-width:700px;

}

.book-meta{

    margin-bottom:2rem;

    font-size:1rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--gold);

}

.book-detail .button{

    margin-top:2rem;

}




.rassegna-hero-background{

    background-image:url("images/neve_a_cavresc2.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.5);

}


.altre_pubblicazioni-hero-background{

    background-image:url("images/nuvole_nebbia.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.5);

}


.per_ordinare-hero-background{

    background-image:url("images/varuna_inverno.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.0);

}





.franco-hero-background{

    background-image:url("images/palu.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.5);

}



.cavrescio-hero-background{

    background-image:url("images/cavresc_estate.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.1);

}


.bernardo-hero-background{

    background-image:url("images/bosco.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.5);

}


.de_bassus-hero-background{

    background-image:url("images/valposchiavo_dal_treno.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1.5);

}





/*==========================================================
    BOOK PRESS SECTION
==========================================================*/

.book-press{

    position:relative;
    overflow:hidden;

    padding:1rem 0;

    background:var(--paper);

}


/* the text stays above everything */

.book-press .container{

    position:relative;
    z-index:10;

}


/*----------------------------------------------------------
    BACKGROUND VIGNETTES
----------------------------------------------------------*/

.press-vignette{

    position:absolute;

    left:0;
    width:100%;

    height:1200px;

    pointer-events:none;

    opacity:.16; 

    filter:
        blur(0px)
        saturate(.15)
        brightness(1);

    background-image:url("images/massimolandscape3.jpg");
    background-size:150% auto;
    background-position:center;
    background-repeat:no-repeat;

    z-index:1;

}


/* fade top and bottom */

.press-vignette::before{

    content:"";

    position:absolute;
    inset:0;


background:linear-gradient(

    to bottom,

    var(--paper) 0px,
    rgba(40,39,35,.98) 80px,
    rgba(40,39,35,.75) 160px,
    rgba(40,39,35,0) 280px,

    rgba(40,39,35,0) calc(100% - 280px),
    rgba(40,39,35,.75) calc(100% - 160px),
    rgba(40,39,35,.98) calc(100% - 80px),
    var(--paper) 100%

);


}



/*==========================================================
    BIOGRAPHY PAGE
==========================================================*/


.biography-body{

    max-width:980px;
    margin:0 auto;


}


/*----------------------------------------------------------
    LANDSCAPE PHOTOS
----------------------------------------------------------*/


.biography-photo-left{

    width:42%;
    float:left;
    margin:.5rem 3rem 2rem 0;

}


.biography-photo-left-large{

    width:52%;
    float:left;
    margin:.5rem 3rem 8rem 0;

}


.biography-photo-right{

    width:42%;
    float:right;
    margin:.5rem 0 2rem 3rem;

}

.biography-photo-left img,
.biography-photo-left-large img,
.biography-photo-right img{
    width:100%;
    display:block;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);
}



/*----------------------------------------------------------
    PORTRAIT PHOTOS
----------------------------------------------------------*/

.biography-photo-left-portrait{

    width:30%;
    float:left;
    margin:.5rem 3rem 2rem 0;

}

.biography-photo-right-portrait{

    width:30%;
    float:right;
    margin:.5rem 0 2rem 3rem;

}

.biography-photo-left-portrait img,
.biography-photo-right-portrait img{

    width:100%;
    display:block;

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);

}

/*----------------------------------------------------------
    PHOTO CREDITS
----------------------------------------------------------*/

.photo-credit{

    margin-top:.45rem;

    font-size:.72rem;

    line-height:1.3;

    text-align:right;

    color:var(--mist);

    font-style:italic;

}


/*----------------------------------------------------------
    CLEAR FLOATS
----------------------------------------------------------*/

.biography-clear{

    clear:both;

}




/*==========================================================
    TABLETS
==========================================================*/

@media (max-width:700px){

    .press-vignette{

        height:800px;

        background-size:220% auto;

    }

}


@media (max-width:1100px){

    h1{

        font-size:4.6rem;

    }

    h2{

        font-size:2.6rem;

    }

    .article-grid,
    .book-grid,
    .project-grid{

        grid-template-columns:repeat(2,1fr);

        gap:2.5rem;

    }

    .footer-grid{

        grid-template-columns:2fr 1fr;

    }

    .hero .intro{

        width:80%;

    }

}


/*==========================================================
    MOBILE NAVIGATION
==========================================================*/

@media (max-width:900px){

    .menu-toggle{

        display:block;

        position:relative;

        z-index:1100;

        color:var(--heading);

    }

    nav{

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.8);

        display:flex;

        justify-content:center;

        align-items:center;

        transform:translateX(100%);

        transition:.45s ease;

    }

    nav.show{

        transform:translateX(0);

    }

 
.menu{

    flex-direction:column;

    gap:1.5rem;

    align-items:flex-start;

    text-align:left;

    width:min(90%,420px);

}


.dropdown{

    position:static;

    opacity:1;

    visibility:visible;

    transform:none;

    min-width:0;

    padding:.5rem 0 0 2rem;

    background:none;

    border:none;

}

.dropdown a{

    padding:.45rem 0;

    font-size:1rem;

    color:rgba(255,255,255,.75); 

    text-transform:uppercase;

    letter-spacing:.12em;

}



    nav a{

        font-size:1.25rem;

        letter-spacing:.12em;

    }

    .header-inner{

        align-items:center;

    }

.new-publication-grid,
.book-detail-grid{

    grid-template-columns:1fr;

}

.new-publication-content p,
.book-detail-content p{

    margin-left:auto;

    margin-right:auto;

}

.new-publication-cover img,
.book-detail-cover img{

    max-height:420px;

}

.book-detail-cover{

    margin-bottom:1rem;

}

}


/*==========================================================
    TABLET LAYOUT
==========================================================*/

@media (max-width:900px){

    h1{

        font-size:3.8rem;

    }

    h2{

        font-size:2.3rem;

    }

    body{

        font-size:19px;

    }

    .hero{

        height:90vh;

    }

    .hero .intro{

        width:92%;

    }

    .welcome,
    .content-section,
    .books-section,
    .projects,
    .quotation{

        padding:6rem 0;

    }

    .article-grid,
    .book-grid,
    .project-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

.footer-nav{

    display:inline-block;

    text-align:left;

    margin:0 auto;

}

.footer-heading{

    margin-top:.6rem;

}

.footer-child{

    margin-left:1rem;

    padding-left:.8rem;

}



.book-detail-grid.biography-grid{

    grid-template-columns:1fr;

}

/* Biography images */

.biography-photo-left,
.biography-photo-left-large,
.biography-photo-right,
.biography-photo-left-portrait,
.biography-photo-right-portrait{

    float:none;
    width:100%;
    max-width:420px;
    margin:2rem auto;

}

.biography-clear{

    clear:both;

}


}


/*==========================================================
    LANDSCAPE RHYTHM
==========================================================*/

@media (max-width:900px){

    .divider-image,
    .parallax,
    .closing-image{

        height:100vh;

    }

}

/*==========================================================
    PHONES
==========================================================*/

@media (max-width:600px){

    body{

        font-size:18px;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.55rem;

    }

    .hero{

        height:82vh;

    }

    .hero-content{

        width:94%;

    }

    .hero .subtitle{

        letter-spacing:.16em;

    }

    .button{

        padding:.9rem 1.5rem;

    }

    blockquote{

        font-size:2rem;

    }

}


/*==========================================================
    SMALL PHONES
==========================================================*/

@media (max-width:420px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:1.8rem;

    }

    body{

        font-size:17px;

    }

    .hero{

        min-height:720px;

    }

}


/*==========================================================
    VERY LARGE SCREENS
==========================================================*/

@media (min-width:1700px){

    h1{

        font-size:6.6rem;

    }

    h2{

        font-size:3.6rem;

    }

    .reading-width{

        max-width:820px;

    }

    .container{

        max-width:1320px;

    }

    .divider-image{

        height:48vh;

    }

    .parallax{

        height:90vh;

    }

    .closing-image{

        height:62vh;

    }

}




/*==========================================================
    LINKS
==========================================================*/

a{

    transition:

        color .3s ease,

        opacity .3s ease;

}

a:hover{

    opacity:.85;

}


/*==========================================================
    IMAGE MOVEMENT
==========================================================*/

.book img,
.article-card,
.project-grid article{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}


/*==========================================================
    ACCESSIBILITY
==========================================================*/

:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}


/*==========================================================
    SELECTION
==========================================================*/

::selection{

    background:#d7ccb3;

    color:#222;

}


/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#efe9dc;

}

::-webkit-scrollbar-thumb{

    background:#b6ab94;

}

::-webkit-scrollbar-thumb:hover{

    background:#958a73;

}


/*==========================================================
    PRINT
==========================================================*/

@media print{

    header,
    nav,
    .button,
    .scroll-indicator{

        display:none;

    }

    body{

        background:white;

        color:black;

    }

    .hero,
    .divider-image,
    .parallax,
    .closing-image{

        height:auto;

    }

}



/*==========================================================
    BOOKS PAGE HERO
==========================================================*/
.books-hero{
    height:75vh;
    margin-top:-10px;  /* Pull hero beneath fixed header */
}


.books-hero-background{
    background-image:url("images/cavresc_inverno.jpg");
    background-position:center 35%;
}


.books-hero .hero-content{
    transform:translateY(7vh);
}


.books-hero h1{
    font-size:1.7rem;
    letter-spacing:.06em;
}

.books-hero + .books-section{
    padding-top:4rem;
}


/*==========================================================
    BIOGRAPHY PAGE HERO
==========================================================*/

.biography-hero-background{

    background-image:url("images/munt.jpg");

    background-position:center 35%;

    filter:
        brightness(0.6)
        contrast(1.15)
        saturate(1);

}




/*==========================================================
    BIOGRAPHY CLOSING IMAGE
==========================================================*/

.biography-closing-image{

    position:relative;

    width:100vw;

    height:180vh;

    margin-left:calc(50% - 50vw);

    overflow:hidden;

    background:var(--paper);

}

.biography-closing-background{

    position:absolute;
    inset:0;
    z-index:1;

    background-image:url("images/massimo_hunts_for_berries.jpg");

    background-repeat:no-repeat;

    background-size:180%;
    background-position:center bottom;

    opacity:.8; 

    filter:
        brightness(.9)
        contrast(1.05)
        saturate(.75);

}

.biography-closing-image::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    background:linear-gradient(

        to bottom,

        var(--paper) 0%,
        rgba(40,39,35,.92) 8%,
        rgba(40,39,35,.45) 20%,
        rgba(40,39,35,0) 35%,

        rgba(40,39,35,0) 65%,
        rgba(40,39,35,.45) 80%,
        rgba(40,39,35,.92) 92%,
        var(--paper) 100%

    );

}




/*==========================================================
    BERNARDO CLOSING IMAGE
==========================================================*/

.bernardo-closing-image{

    position:relative;

    width:100vw;

    height:180vh;

    margin-left:calc(50% - 50vw);

    overflow:hidden;

    background:var(--paper);

}

.bernardo-closing-background{

    position:absolute;
    inset:0;
    z-index:1;

    background-image:url("images/this_i_make.jpg");

    background-repeat:no-repeat;

    background-size:180%;
    background-position:center bottom;

    opacity:.8; 

    filter:
        brightness(.9)
        contrast(1.05)
        saturate(.75);

}

.bernardo-closing-image::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    background:linear-gradient(

        to bottom,

        var(--paper) 0%,
        rgba(40,39,35,.92) 8%,
        rgba(40,39,35,.45) 20%,
        rgba(40,39,35,0) 35%,

        rgba(40,39,35,0) 65%,
        rgba(40,39,35,.45) 80%,
        rgba(40,39,35,.92) 92%,
        var(--paper) 100%

    );

}



/*==========================================================
    OPERE PAGE HERO
==========================================================*/

.opere-hero h1{
    font-size:3rem;
}



/*==========================================================
    END OF STYLESHEET
==========================================================*/