/* ==========================================================
   01. CSS VARIABLES
   ========================================================== */

:root{

    --bg:#2B2F36;
    --sidebar:#24282E;

    --text:#ECECEC;
    --muted:#AEB6BF;

    --white:#F7F7F7;

    --link:#9CB4C8;
    --hover:#D8E3EC;

    --line:#4F5863;

    --sidebar-width:230px;
    --content-width:1040px;

    --transition:.25s ease;

}

/* ==========================================================
   02. RESET
   ========================================================== */

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

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    padding:0;

    background:var(--bg);
    color:var(--text);

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

    font-weight:300;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}


/* ==========================================================
   03. LINKS
   ========================================================== */

a{

    color:var(--link);

    text-decoration:none;

    transition:

        color var(--transition),
        background var(--transition),
        padding-left var(--transition);

}

a:hover{

    color:var(--hover);

}

/* ==========================================================
   04. LAYOUT
   ========================================================== */

.wrapper{

    display:flex;

    min-height:100vh;

}

.content{

    width:100%;

}

/* ==========================================================
   05. SIDEBAR
   ========================================================== */

aside{

    position:fixed;

    top:0;
    left:0;

    width:var(--sidebar-width);

    height:100vh;

    padding:40px 20px;

    background:var(--sidebar);

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

    overflow-y:auto;
    overflow-x:hidden;

}

/* ==========================================================
   06. PORTRAIT
   ========================================================== */

aside img{

    display:block;

    width: 180px;

    max-width:100%;

    margin:0 auto 24px;

    border:1px solid #6A727C;

    border-radius:10px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28);

}

/* ==========================================================
   07. NAVIGATION
   ========================================================== */

nav{

    margin-top:42px;

}

nav a{

    display:block;

    padding:10px 0 10px 22px;

    font-size:16px;

    font-weight:300;

    letter-spacing:.03em;

    border-radius:6px;

}

nav a:hover{

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

    padding-left:28px;

}

nav a.active{

    color:var(--white);

    font-weight:500;

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

    position:relative;

}

nav a.active::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:3px;

    height:28px;

    border-radius:2px;

    background:var(--link);

}

.sep{

    height:1px;

    margin:24px 0;

    background:var(--line);

}

/* ==========================================================
   08. MAIN CONTENT
   ========================================================== */

main{

    margin-left:var(--sidebar-width);

    width:100%;

    max-width:var(--content-width);

    padding:80px 80px 70px;

}

/* ==========================================================
   09. TYPOGRAPHY
   ========================================================== */

h1{

    margin:0;

    font-size:54px;

    font-weight:600;

    letter-spacing:-0.02em;

    line-height:1.15;

}

.subtitle{

    margin:18px 0 0;

    color:#BFC8D0;

    font-size:23px;

    font-style:italic;

    font-weight:300;

}

h2{

    margin:0 0 22px;

    color:#BAC7D3;

    font-size:28px;

    font-weight:500;

    letter-spacing:.02em;

}

h3{

    margin:0;

    font-weight:600;

    line-height:1.4;

    color:var(--white);

}

p{

    margin:0 0 22px;

    max-width:820px;

    font-size:18px;

    line-height:1.65;

}

hr{

    border:none;

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

    margin:44px 0;

}

/* ==========================================================
   10. PAGE HEADER
   ========================================================== */

.page-header{

    margin-bottom:14px;

}

.intro{

    margin:60px 0;
    max-width:none;

}


/* ==========================================================
   PROFILE FACTS
   ========================================================== */

.profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 38px;
    padding-top: 4px;
}

.profile-fact {
    min-width: 0;
}

.profile-fact strong {
    display: block;
    margin-bottom: 3px;
    color: #D4D9DE;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.profile-fact span {
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

/* ==========================================================
   11. LISTS
   ========================================================== */

ul,
ol{

    margin:0 0 26px 26px;

    padding:0;

}

li{

    margin:8px 0;

    line-height:1.8;

}

/* ==========================================================
   12. TABLES
   ========================================================== */

table{

    width:100%;

    margin:28px 0;

    border-collapse:collapse;

}

th{

    padding:12px;

    text-align:left;

    color:var(--white);

    font-weight:600;

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

}

td{

    padding:12px;

    vertical-align:top;

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

}

/* ==========================================================
   13. BLOCKQUOTE
   ========================================================== */

blockquote{

    margin:28px 0;

    padding-left:22px;

    border-left:3px solid var(--link);

    color:var(--muted);

    font-style:italic;

}

/* ==========================================================
   14. SECTIONS
   ========================================================== */

section{

    margin-bottom:60px;

}

.section-title{

    margin-bottom:18px;

    color:#BAC7D3;

    font-size:28px;

    font-weight:500;

}

/* ==========================================================
   15. HELPERS
   ========================================================== */

.small{

    color:var(--muted);

    font-size:.92rem;

}

.center{

    text-align:center;

}

.mt-0{margin-top:0!important;}
.mt-1{margin-top:12px!important;}
.mt-2{margin-top:24px!important;}
.mt-3{margin-top:36px!important;}

.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:12px!important;}
.mb-2{margin-bottom:24px!important;}
.mb-3{margin-bottom:36px!important;}


/* ==========================================================
   16. CURRICULUM VITAE
   ========================================================== */


.intro h2{ margin:0 0 26px;

    padding-bottom:12px;

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

.cv-section{

    margin:60px 0;

}

.cv-section h2{

    margin:0 0 26px;

    padding-bottom:12px;

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

}

.cv-item{

    display:grid;

    grid-template-columns:170px minmax(0,1fr);

    column-gap:42px;

    align-items:start;

    padding:28px 0;

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

}

.cv-item:last-child{

    border-bottom:none;

}

.cv-date{

    color:var(--muted);

    font-size:15px;

    font-weight:500;

    letter-spacing:.03em;

    white-space:nowrap;

    padding-top:3px;

}

.cv-content{

    min-width:0;

}

.cv-content h3{

    margin:0 0 8px;

    font-size:23px;

    font-weight:600;

    line-height:1.35;

    color:var(--white);

}

.cv-content p{

    margin:0 0 10px;

    max-width:none;

    font-size:17px;

    line-height:1.75;

}

.cv-content a{

    font-weight:400;

}

/* ==========================================================
   17. PUBLICATIONS
   ========================================================== */

.publication-section{

    margin:60px 0;

}

.publication-section h2{

    margin:0 0 26px;

    padding-bottom:12px;

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

}

.publication{

    display:grid;

    grid-template-columns:90px minmax(0,1fr);

    gap:24px;

    align-items:start;

    padding:28px 0;

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

}

.publication:last-child{

    border-bottom:none;

}

.publication-year{

    color:var(--muted);

    font-size:15px;

    font-weight:600;

    letter-spacing:.05em;

    white-space:nowrap;

    padding-top:4px;

}

.publication-body{

    min-width:0;

}

.publication-title{

    margin:0 0 10px;

    color:var(--white);

    font-size:22px;

    font-weight:600;

    line-height:1.45;

}

.publication-authors{

    margin:0 0 10px;

    color:var(--muted);

    font-size:16px;

}

.publication-source{

    margin:0 0 6px;

    font-size:17px;

    font-style:italic;

}

.publication-meta{

    margin:0 0 14px;

    color:var(--muted);

    font-size:15px;

}

/* Link badges */
.publication-links{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:5px;

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

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

    color:var(--link);

    font-size:13px;

    font-weight:500;

    letter-spacing:.03em;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .15s ease;

}

.badge:hover{

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

    color:var(--white);

    border-color:var(--link);

    transform:translateY(-1px);

}

/* Responsive */
@media (max-width:900px){

    .cv-item,
    .publication{

        grid-template-columns:1fr;

        gap:12px;

    }

    .cv-date,
    .publication-year{

        padding-top:0;

        font-size:14px;

    }

    .cv-content h3,
    .publication-title{

        font-size:20px;

    }

    .profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
    }

}

@media (max-width:600px) {

    .profile-facts {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

/* ==========================================================
   18. FOOTER
   ========================================================== */

footer{

    margin-top:70px;

    padding-top:24px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:var(--muted);

    font-size:14px;

    opacity:.70;

}

/* ==========================================================
   20. RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    main{

        padding:55px;

    }

    h1{

        font-size:46px;

    }

    .subtitle{

        font-size:21px;

    }

}

@media (max-width:900px){

    .wrapper{

        display:block;

    }

    aside{

        position:relative;

        left:auto;
        
        top:auto;

        width:100%;

        height:auto;

        border-right:none;

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

    }

    aside img{

        width:145px;

    }

    nav{

        margin-top:28px;

    }

    main{

        margin-left:0;

        width:100%;

        max-width:none;

        padding:40px 28px;

    }

    footer{

        display:block;

    }

    footer div:first-child{

        margin-bottom:8px;

    }

}
/* ==========================================================
   21. PRINT
   ========================================================== */

@media print{

    body{

        background:#ffffff;

        color:#000000;

        font-family:Arial,Helvetica,sans-serif;

    }

    aside{

        display:none;

    }

    main{

        margin:0;

        width:100%;

        max-width:100%;

        padding:0;

    }

    hr,
    .sep{

        display:none;

    }

    .badge{

    border:1px solid #999;

    }
    
    footer{

        border-top:1px solid #999;

        color:#444;

        opacity:1;

    }

    a{

        color:#000;

        text-decoration:none;

    }

}

/* ===================== END OF FILE ====================== */