/* =====================================================
   VARIABLES
===================================================== */

:root{
    --bg:#EEE8E6;
    --text:#232E21;

    --max-width:1020px;

    --border:rgba(35,46,33,.18);

    --shadow:
        0 2px 8px rgba(0,0,0,.06);

    --transition:.25s ease;
}


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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);

    font-family:"Raleway",sans-serif;
    line-height:1.35;

    min-height:100vh;
}

img{
    display:block;
    max-width:100%;
}

iframe{
    border:none;
}


/* =====================================================
   PAGE FLASH
===================================================== */

#flash{
    position:fixed;
    inset:0;

    background:white;

    z-index:9999;

    pointer-events:none;

    opacity:0;
}

.flash{
    animation:flashFade .95s ease;
}

@keyframes flashFade{

    0%{
        opacity:.95;
    }

    40%{
        opacity:.45;
    }

    100%{
        opacity:0;
    }
}


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

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:"Bodoni Moda",serif;
    line-height:1.1;
    margin-top:0;
}

h1{
    font-size:clamp(2.5rem,5vw,4.5rem);
}

h2{
    font-size:clamp(1.8rem,4vw,3rem);
}

p{
    margin-top:0;
    font-size: 1.15em;
}

ul {
    font-size: 1.15em;
}


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

a{
    color:var(--text);
    text-decoration:underline;

    transition:var(--transition);
}

a:hover{
     color: #000000;
}

nav a,
.logo{
    text-decoration:none;
    background:none !important;
}


/* =====================================================
   CONTAINER
===================================================== */

.container{
    width:min(92%,var(--max-width));
    margin:auto;
}


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

.site-header{
    position:sticky;
    top:0;

    background:var(--bg);

    z-index:1000;

    box-shadow:var(--shadow);
}

.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
   
    padding:1rem 0;
    position: relative;
}

.logo{
    font-family:"Bodoni Moda",serif;
    font-size:1.5rem;
    color:var(--text);
}

nav{
    display:flex;
    gap:2rem;
}

nav a{
    color:var(--text);
}

.menu-toggle{
    display:none;

    background:none;
    border:none;

    cursor:pointer;

    font-size:1.8rem;

    color:var(--text);
    position:relative;
    z-index:2000;
}


/* =====================================================
   PAGE TITLES
===================================================== */

.page-header{
    margin-top:4rem;
    margin-bottom:3rem;
}

.page-header h1{
    margin-bottom:.6rem;
}

.divider{
    width:100%;
    height:1px;

    background:var(--border);
}


/* =====================================================
   HOME PAGE
===================================================== */

.hero{
    min-height:75vh;

    display:grid;
    grid-template-columns:1fr 1.2fr;

    gap:4rem;

    align-items:center;
}

.hero-photo img{
    width:100%;
    height:auto;

    border-radius:4px;
}

.hero-content p{
    max-width:60ch;
}

.read-more{
    display:inline-flex;
    gap:.4rem;
    align-items:center;

    margin-top:1rem;

    font-weight:600;
}


/* =====================================================
   ABOUT PAGE
===================================================== */

.about-layout{
    display:grid;

    grid-template-columns:280px 1fr;

    gap:4rem;
}

.about-images{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.about-images img{
    width:100%;
}

.cv-wrapper{
    margin-top:4rem;
}

.cv-wrapper iframe{
    width:100%;
    height:800px;
}


/* =====================================================
   RESEARCH + TEACHING
===================================================== */

.featured-project{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:2rem;
    align-items:start;
    margin-bottom:4rem;
}

.featured-image img{
    width:100%;
    display:block;
    aspect-ratio:1;
    object-fit:cover;
}

.featured-content h2{
    margin:0 0 1rem;
}

.featured-content p{
    margin:0 0 1rem;
}

.card-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:2rem;
}

.card{
    display:flex;
    flex-direction:column;
}

.card-image{
    position:relative;
    overflow:hidden;
}

.card-image img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    transition:none;
}

.card-image::after{
    display:none;
}

.card-image:hover img{
    transform:none;
}

/*** .card-image{
    position:relative;
    overflow:hidden;
}

.card-image img{
    width:100%;
    aspect-ratio:1;

    object-fit:cover;

    transition:
        transform .35s ease;
}

.card-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:white;

    opacity:0;

    transition:.35s ease;
}

.card-image:hover img{
    transform:scale(1.015);
}

.card-image:hover::after{
    opacity:.12;
}
**/

.card p{
    margin-top:1rem;
}


/* =====================================================
   DIGITAL HUMANITIES
===================================================== */

.digital-humanities{
    font-family:
    "Raleway", "Bitcount Grid Single"
    monospace;
    background-color: #222323;
}

.digital-humanities h1,
.digital-humanities h2,
.digital-humanities h3 {
    font-family:
    "Bitcount Grid Single", 
    monospace;
    color: #00FAAC;

}

.digital-humanities p{
    font-family:
    "Raleway",
    monospace;
    color: #00FAAC;

}

.digital-humanities p a{
    font-family:
    "Raleway",
    monospace;
    color: #00FAAC;

}

.digital-humanities footer p{
    font-family:
    "Bitcount Grid Single",
    monospace;
    color: #00FAAC;

}

.digital-humanities footer a{
    font-family:
    "Raleway",
    monospace;
    color: #00FAAC;

}


/* ==========================================
   SITE SEARCH RESULTS
========================================== */

#searchResults {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-result {
    padding: 1rem 1.2rem;
    border: 1px dotted #232E21;
    background: rgba(255,255,255,.2);
    transition: .2s ease;
}

.search-result:hover {
    background: rgba(255,255,255,.4);
}

.search-result a {
    text-decoration: none;
    font-weight: 600;
}

.search-snippet {
    margin-top: .3rem;
    font-size: .95rem;
    opacity: .8;
}


/* =====================================================
   SITEMAP
===================================================== */

.search-box{
    margin-bottom:2rem;
}

.search-box input{

    width:100%;

    padding:1rem;

    font-size:1rem;

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

    background:white;
}

.sitemap-list{
    list-style:none;

    padding:0;
}

.sitemap-list li{
    margin-bottom:1rem;
}


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

footer{

    margin-top:5rem;

    padding:3rem 0;

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

    display:flex;

    justify-content:space-between;

    gap:2rem;
}

.footer-right{
    display:flex;
    align-items:center;
    gap:1rem;
}

.footer-right a{
    text-decoration:none;
}

.footer-right i{
    font-size:1.2rem;
}


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

@media (max-width:1024px){

    .card-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


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

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    nav{
        display:none;

        position:absolute;

        left:0;
        right:0;
        top:100%;

        background:var(--bg);

        flex-direction:column;

        padding:1.5rem;

        box-shadow:var(--shadow);
    }

    nav.open{
        display:flex;
    }

    .hero{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .hero-photo{
        order:2;
    }

    .about-layout{
        grid-template-columns:1fr;
    }

    .card-grid{
        grid-template-columns:1fr;
    }

    .tabs{
        position:static;

        flex-direction:row;

        justify-content:center;

        padding:1rem;
    }

    .notebook-page{
        padding:2rem;
    }

    .notebook::before{
        display:none;
    }

    footer{
        flex-direction:column;
        align-items:flex-start;
    }
}
```