/*==================================================
    THE LYLE C. MAY CASE REPOSITORY
    Repository Design System v2
==================================================*/


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

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


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

body{

    background:#ffffff;
    color:#2f2f2f;

    font-family:"Inter",sans-serif;
    line-height:1.85;

}

.container{

    width:min(960px,92vw);
    margin:70px auto;

}


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

header{

    text-align:center;
    padding-bottom:48px;

}

.collection-number{

    color:#234d7d;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:600;

}

h1{

    font-family:"Cormorant Garamond",serif;

    font-size:3.25rem;

    font-weight:500;

    color:#1b3556;

    margin-top:18px;

    margin-bottom:12px;

    line-height:1.1;

}

.subtitle{

    margin-top:10px;

    color:#234d7d;

    font-size:.88rem;

    text-transform:uppercase;

    letter-spacing:.10em;

    line-height:1.7;

}

.updated{

    margin-top:16px;

    font-family:"Cormorant Garamond",serif;

    font-size:1rem;

    font-style:italic;

    color:#8d8d8d;

}


/*==================================================
    BREADCRUMBS
==================================================*/

.breadcrumb{

    margin-bottom:48px;

    font-size:.92rem;

    color:#777;

}

.breadcrumb a{

    color:#234d7d;

    text-decoration:none;

    font-weight:500;

    transition:.2s;

}

.breadcrumb a:hover{

    text-decoration:underline;

}

.separator{

    margin:0 8px;

    color:#b6b6b6;

}


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

.collections{

    margin-bottom:32px;

}

.collections h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.15rem;

    font-weight:500;

    color:#1b3556;

    margin-bottom:16px;

}

.section-label{

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

    font-size:1rem;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#5f6b7a;

    margin-bottom:16px;

}

.collections p{

    max-width:760px;

    line-height:1.9;

    margin-bottom:18px;

}


/*==================================================
    CONTENT CARDS
==================================================*/

.card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:28px;

    padding:32px;

    margin-bottom:20px;

    border:1px solid #d8dde3;

    border-radius:10px;

    transition:
        border-color .2s,
        transform .2s,
        box-shadow .2s;

}

.card:hover{

    border-color:#234d7d;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    color:#222;

    margin-bottom:12px;

}

.card p{

    color:#666;

    max-width:600px;

    margin-bottom:0;

}

.card-label{

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

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.02em;

    text-transform:none;

    color:#5f6b7a;

    margin-top:18px;

    margin-bottom:12px;

}

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

.open{

    white-space:nowrap;

    color:#234d7d;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}

.open:hover{

    color:#173758;

}


/*==================================================
    SECTION DIVIDERS
==================================================*/

.section-divider{

    margin:3rem 0;

    border:0;

    border-top:1px solid #d9dde5;

}


/*==================================================
    PHOTOS
==================================================*/


.photo {

text-align:center;

margin:40px 0;

}

.photo img {

max-width:350px;

width:100%;

border-radius:8px;

box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.photo figcaption {

margin-top:15px;

font-size:.9rem;

color:#666;

}






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

footer{

    margin-top:90px;

    padding-top:40px;

    border-top:1px solid #e6e6e6;

    text-align:center;

    color:#777;

    font-size:.9rem;

}

.footer-note{

    margin-top:10px;

    font-size:.85rem;

    letter-spacing:.08em;

    color:#8b8b8b;

}

.document-link{

    color:#234d7d;

    font-weight:600;

    text-decoration:none;

}

.document-link:hover{

    text-decoration:underline;

}

/*==================================================
    RESPONSIVE DESIGN
==================================================*/

@media (max-width:700px){

    .card{

        flex-direction:column;

        align-items:flex-start;

    }

    .open{

        margin-top:20px;

    }

    h1{

        font-size:2.8rem;

    }

}