:root{
    --ink:#132238;
    --muted:#677388;
    --accent:#205a97;
    --line:#dce4ec;
    --soft:#f6f9fc;
    --max:1780px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:18px;
}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--ink);
    background:white;
    line-height:1.6;
}

a{
    text-decoration:none;
    color:inherit;
}

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

.wrap{
    width:min(var(--max),calc(100% - 70px));
    margin:auto;
}


/* =========================================================
   Header
   ========================================================= */

header{
    position:sticky;
    top:0;
    z-index:20;

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--line);
}

nav{
    height:90px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    font-family:Georgia,serif;
    font-size:1.85rem;
    font-weight:700;
}

.links{
    display:flex;
    gap:44px;
}

.links a{
    font-size:1.08rem;
    color:#39485e;
}

.links a:hover{
    color:var(--accent);
}

.menu{
    display:none;
    border:0;
    background:transparent;
    font-size:1.5rem;
}


/* =========================================================
   Hero
   ========================================================= */

.hero{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:75px;

    align-items:center;

    padding:100px 0 90px;

    min-height:calc(100vh - 90px);
}

.eyebrow{
    color:var(--accent);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.hero h1{
    font-family:Georgia,serif;

    font-size:clamp(4rem,6vw,7rem);

    line-height:1.02;

    font-weight:500;

    letter-spacing:-.04em;

    margin:22px 0;
}

.hero .intro{
    font-size:1.35rem;

    line-height:1.7;

    color:var(--muted);

    max-width:760px;
}

.buttons{
    display:flex;

    gap:16px;

    margin-top:36px;
}

.button{
    padding:14px 22px;

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

    font-size:1rem;
}

.button.primary{
    background:var(--ink);

    color:white;
}

.hero-figure{
    position:relative;
}

.hero-figure img{
    width:100%;
    border-radius:26px;
}

.hero-note{
    position:absolute;

    right:26px;
    bottom:22px;

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

    padding:12px 16px;

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

    font-size:.9rem;

    color:var(--muted);
}


/* =========================================================
   General sections
   ========================================================= */

section{
    padding:110px 0;

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

.section-top{
    display:flex;

    justify-content:space-between;

    gap:55px;

    align-items:flex-end;

    margin-bottom:55px;
}

.section-top h2{
    font-family:Georgia,serif;

    font-size:clamp(3.3rem,4.5vw,5.3rem);

    line-height:1.05;

    font-weight:500;

    margin:0;

    letter-spacing:-.025em;
}

.section-top p{
    max-width:650px;

    color:var(--muted);

    margin:0;

    font-size:1.08rem;

    line-height:1.7;
}


/* =========================================================
   Research
   ========================================================= */

.research-grid{
    display:grid;

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

    gap:32px;
}

.research-card{
    border-top:2px solid var(--ink);

    padding:30px 8px 20px;
}

.research-card span{
    font-size:.88rem;

    color:var(--accent);

    font-weight:700;
}

.research-card h3{
    font-family:Georgia,serif;

    font-size:2.15rem;

    line-height:1.2;

    font-weight:500;

    margin:42px 0 16px;
}

.research-card p{
    color:var(--muted);

    font-size:1.08rem;

    line-height:1.68;
}


/* =========================================================
   Publications
   ========================================================= */

.pub-grid{
    display:grid;

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

    gap:28px;
}

.pub{
    border:1px solid var(--line);

    background:white;

    display:grid;

    /*
    More room for scientific figures.
    */
    grid-template-columns:44% 56%;

    align-items:center;

    min-height:350px;

    overflow:hidden;

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

.pub:hover{
    transform:translateY(-4px);

    border-color:#c5d1de;

    box-shadow:
        0 16px 36px rgba(25,55,90,.09);
}


/* Publication figure */

.pub img{
    width:100%;

    height:auto;

    max-width:100%;

    max-height:420px;

    object-fit:contain;

    display:block;

    align-self:center;

    justify-self:center;

    background:#fff;

    padding:12px;
}


/* Publication text area */

.pub-body{
    padding:34px 38px;
}


/* Year + journal */

.pub-meta{
    font-size:1.25rem;

    line-height:1.35;

    color:var(--accent);

    font-weight:700;

    margin-bottom:16px;

    letter-spacing:.005em;
}


/* Publication title */

.pub h3{
    font-family:Georgia,serif;

    font-size:1.58rem;

    line-height:1.28;

    margin:0 0 16px;

    font-weight:500;
}


/* Authors + standard text */

.pub p{
    font-size:1.02rem;

    line-height:1.58;

    color:var(--muted);

    margin:8px 0;
}


/* Research summary */

.pub .summary{
    margin-top:17px;

    color:#48576b;

    font-size:1.02rem;

    line-height:1.62;
}


/* Scholar link */

.scholar-link{
    display:inline-block;

    margin-top:42px;

    color:var(--accent);

    font-size:1.08rem;

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

    padding-bottom:3px;
}


/* =========================================================
   Contact
   ========================================================= */

.contact{
    padding:90px 0;
}

.contact-row{
    display:flex;

    justify-content:space-between;

    gap:45px;

    align-items:center;
}

.contact h2{
    font-family:Georgia,serif;

    font-size:3rem;

    line-height:1.18;

    font-weight:500;

    margin:0;
}

.small-links{
    display:flex;

    gap:28px;

    font-size:1.08rem;
}

.small-links a{
    border-bottom:1px solid var(--line);
}


/* =========================================================
   Footer
   ========================================================= */

footer{
    border-top:1px solid var(--line);

    padding:30px 0;

    color:var(--muted);

    font-size:.9rem;
}


/* =========================================================
   CV page
   ========================================================= */

.cv-page{
    padding:120px 0;

    min-height:70vh;
}

.cv-page h1{
    font-family:Georgia,serif;

    font-size:5rem;

    font-weight:500;
}

.notice{
    border:1px solid var(--line);

    background:var(--soft);

    padding:36px;

    max-width:850px;

    font-size:1.05rem;
}


/* =========================================================
   Medium desktop
   ========================================================= */

@media(max-width:1400px){

    html{
        font-size:17px;
    }

    .wrap{
        width:min(1280px,calc(100% - 50px));
    }

    .pub{
        grid-template-columns:42% 58%;
        min-height:310px;
    }

    .pub-body{
        padding:28px;
    }

    .pub h3{
        font-size:1.45rem;
    }

}


/* =========================================================
   Tablet
   ========================================================= */

@media(max-width:900px){

    html{
        font-size:16px;
    }

    .wrap{
        width:calc(100% - 36px);
    }

    nav{
        height:82px;
    }

    .hero{
        grid-template-columns:1fr;

        padding-top:65px;

        gap:45px;
    }

    .hero h1{
        font-size:clamp(3.5rem,9vw,5rem);
    }

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

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

    .pub{
        grid-template-columns:42% 58%;

        min-height:280px;
    }

    .links{
        display:none;

        position:absolute;

        top:82px;

        left:0;
        right:0;

        background:white;

        padding:24px;

        flex-direction:column;

        border-bottom:1px solid var(--line);
    }

    .links.open{
        display:flex;
    }

    .menu{
        display:block;
    }

    .section-top,
    .contact-row{
        align-items:flex-start;

        flex-direction:column;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media(max-width:560px){

    html{
        font-size:15px;
    }

    .wrap{
        width:calc(100% - 26px);
    }

    nav{
        height:70px;
    }

    .brand{
        font-size:1.55rem;
    }

    .hero{
        padding-top:50px;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .hero .intro{
        font-size:1.1rem;
    }

    section{
        padding:75px 0;
    }

    .section-top h2{
        font-size:2.8rem;
    }

    .research-card h3{
        font-size:1.8rem;
    }

    .pub{
        grid-template-columns:1fr;

        min-height:auto;
    }

    .pub img{
        width:100%;

        height:auto;

        max-height:none;

        object-fit:contain;

        padding:12px;
    }

    .pub-body{
        padding:24px;
    }

    .pub-meta{
        font-size:1.12rem;
    }

    .pub h3{
        font-size:1.45rem;
    }

    .pub p,
    .pub .summary{
        font-size:1rem;
    }

    .buttons{
        flex-wrap:wrap;
    }

    .contact h2{
        font-size:2.4rem;
    }
}