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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   BODY
========================== */

body{

    background:#ddd0ba;
    color:#35281d;

    font-family:"Cormorant Garamond", serif;

    -webkit-font-smoothing:antialiased;

}

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

header{

    max-width:1200px;

    margin:50px auto;

    padding:0 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    text-decoration:none;

    color:#35281d;

    font-size:2.2rem;

    font-style:italic;

    font-weight:500;

}

nav{

    display:flex;

    gap:38px;

}

nav a{

    text-decoration:none;

    color:#5b4838;

    font-family:"Special Elite", monospace;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.25s;

}

nav a:hover{

    color:#2d2218;

}

.active{

    border-bottom:1px solid #5b4838;

    padding-bottom:4px;

}

/* ==========================
   MAIN
========================== */

.poems{

    max-width:850px;

    margin:120px auto;

    padding:0 20px;

}

/* ==========================
   INTRO
========================== */

.intro{

    text-align:center;

    margin-bottom:90px;

}

.intro h1{

    font-size:4.3rem;

    font-weight:500;

    margin-bottom:18px;

}

.intro p{

    font-family:"Special Elite", monospace;

    color:#74614f;

    line-height:2;

    font-size:.9rem;

}

/* ==========================
   POEM LIST
========================== */

.poem-list article{

    border-top:1px solid rgba(0,0,0,.18);

    padding:35px 0;

}

.poem-list article:last-child{

    border-bottom:1px solid rgba(0,0,0,.18);

}

.poem-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    color:#35281d;

    transition:.25s;

}

.poem-list a:hover{

    color:#000;

}

.poem-list h2{

    font-size:2rem;

    font-weight:500;

    margin-bottom:8px;

}

.poem-list p{

    font-family:"Special Elite", monospace;

    font-size:.8rem;

    color:#786654;

    line-height:1.6;

}

.poem-list span{

    font-family:"Special Elite", monospace;

    font-size:.75rem;

    color:#786654;

    white-space:nowrap;

    transition:.25s;

}

.poem-list a:hover span{

    transform:translateX(6px);

}

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

@media(max-width:900px){

    header{

        flex-direction:column;

        gap:25px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .intro h1{

        font-size:3rem;

    }

    .poem-list a{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

}
/* =====================================
   INDIVIDUAL POEM PAGE
===================================== */

.poem-page{

    max-width:700px;

    margin:100px auto;

    padding:0 20px 100px;

}

.back-link{

    display:inline-block;

    margin-bottom:50px;

    text-decoration:none;

    color:#7a6755;

    font-family:"Special Elite", monospace;

    font-size:.8rem;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.3s;

}

.back-link:hover{

    color:#35281d;

}

.poem-page h1{

    font-family:"Cormorant Garamond", serif;

    font-size:4rem;

    font-weight:500;

    color:#35281d;

    margin-bottom:10px;

}

.poem-date{

    font-family:"Special Elite", monospace;

    font-size:.8rem;

    color:#7a6755;

    margin-bottom:60px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.poem{

    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    line-height:2;

    color:#35281d;

}

.poem p{

    margin-bottom:45px;

}

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

@media (max-width:768px){

    .poem-page{

        margin:60px auto;

        padding:0 24px 80px;

    }

    .poem-page h1{

        font-size:3rem;

    }

    .poem{

        font-size:1.45rem;

        line-height:1.8;

    }

}
.poem-intro{

    font-family:"Special Elite", monospace;

    font-size:.82rem;

    line-height:2;

    color:#6f5d4c;

    margin-bottom:60px;

    max-width:620px;

}