*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
background:
        radial-gradient(circle at top right,#F3E9D8 0%,transparent 35%),
        radial-gradient(circle at bottom left,#EFE4D2 0%,transparent 30%),
        #FAF7F2;
    color:#3E3A36;
line-height:1.7;
}

header{
background:#5F6F52;
padding:20px;
position:sticky;
top:0;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
}

.logo{
font-size:24px;
font-weight:600;
color:#FFFDF9;
}

nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav a{
color:#FFFDF9;
text-decoration:none;
}
nav a:hover{
    color:#E8DCCB;
}

.hero{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:80px;

    align-items:center;

    padding:80px 50px;

}

.hero-text{
    max-width:1500px;
flex:1;
}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:320px;

    max-width:100%;

    border-radius:25px;

    object-fit:cover;

}

h1{
    color:#5F6F52;
font-size:48px;
}

h2{
    color:#C97B3D;
margin:15px 0;
}

.buttons{
margin-top:30px;
}

.btn,.btn-outline{

padding:12px 28px;
border-radius:30px;
text-decoration:none;
margin-right:15px;
}

.btn{
    background:#C97B3D;
    color:white;
    transition:.3s;
}

.btn:hover{
    background:#B56A2D;
}

.btn-outline{
    border:2px solid #5F6F52;
    color:#5F6F52;
}

.btn-outline:hover{
    background:#5F6F52;
    color:white;
}

section{
padding:70px 20px;
max-width:1200px;
margin:auto;
}

.section-title{
color:#6B4F3B;
font-size:34px;
margin-bottom:40px;
text-align:center;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.card{
text-align:center;
background:#FFFDF9;
border:1px solid #E8DCCB;
box-shadow:0 10px 20px rgba(107,79,59,.08);
padding:30px;
border-radius:15px;
transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(107,79,59,.15);
}



.year{
font-weight:bold;
color:#6B4F3B;
}

.project{
     background:#FFFDF9;
    border:1px solid #E8DCCB;
    box-shadow:0 10px 25px rgba(107,79,59,.08);
display:flex;
gap:30px;
margin-bottom:40px;
padding:25px;
border-radius:15px;
transition:all .35s ease;
cursor:pointer;

}

.project:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(107,79,59,.18);

    border-color:#C97B3D;

}

.project img{
width:250px;
border-radius:12px;
object-fit:cover;
transition:.35s;
}

.project:hover img{

    transform:scale(1.04);

}

.project-link{

    text-decoration:none;

    color:inherit;

    display:block;

}

.tech{
display:inline-block;
margin-top:15px;
background:#5F6F52;
color:white;
padding:8px 15px;
border-radius:20px;
font-size:14px;
}

footer{
background:#6B4F3B;
color:white;
text-align:center;
padding:25px;
margin-top:50px;
}

.journey{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-top:60px;

    gap:20px;

}

.academic-timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    margin-top:60px;

}

.timeline-line{

    position:absolute;

    left:0;

    right:0;

    top:12px;

    height:3px;

    background:#C97B3D;

}

.timeline-step{

    position:relative;

    width:180px;

    text-align:center;

    z-index:2;

}

.dot{

    width:22px;

    height:22px;

    background:#5F6F52;

    border:5px solid #FAF7F2;

    border-radius:50%;

    margin:auto;

}

.date{

    display:block;

    margin-top:20px;

    color:#6B4F3B;

    font-weight:600;

}

.timeline-step h4{

    margin-top:10px;

}

.timeline-step p{

    font-size:14px;

    color:#777;

}

.research-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    margin:90px 0;

}

.reverse{

    flex-direction:row-reverse;

}

.research-image{

    flex:1;

}

.research-image img{

    width:100%;

    border-radius:22px;

    border:8px solid #E8DCCB;

    box-shadow:0 18px 35px rgba(107,79,59,.12);

    transition:.4s;

}

.research-image img:hover{

    transform:scale(1.03);

}

.research-text{

    flex:1;

}

.research-text h3{

    color:#5F6F52;

    font-size:32px;

    margin-bottom:20px;

}

.research-text p{

    font-size:18px;

    line-height:1.8;

    color:#555;

    margin-bottom:25px;

}

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tags span{

    background:#E8DCCB;

    color:#6B4F3B;

    padding:10px 18px;

    border-radius:40px;

    font-size:15px;

    font-weight:500;

}

.teaching-container{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:top;

}

.course-grid{

display:grid;

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

gap:15px;

margin-top:25px;

}

.course-grid div{

display:flex;

padding:15px;

background:#FFFDF9;

border-radius:15px;

border:1px solid #E8DCCB;

justify-content: center;

align-items: center; 

text-align:center;

transition:.3s;

}

.course-grid div:hover{

background:#5F6F52;

color:white;

transform:translateY(-5px);

}

.contributions{

display:flex;

flex-direction:column;

gap:15px;

margin-top:30px;

}

.item{

padding:8px;

background:#FAF7F2;

border-left:5px solid #C97B3D;

border-radius:10px;

}

.contact-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:50px;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 28px;

    width:320px;

    text-decoration:none;

    background:#FFFDF9;

    border:2px solid #E8DCCB;

    border-radius:20px;

    transition:.3s;

    color:#3E3A36;

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

}

.contact-card:hover{

    transform:translateY(-6px);

    border-color:#C97B3D;

    box-shadow:0 18px 35px rgba(0,0,0,0.12);

}

.contact-card i{

    font-size:32px;

    color:#5F6F52;

}

.contact-card h4{

    margin:0 0 6px;

    color:#5F6F52;

}

.contact-card p{

    margin:0;

    font-size:15px;

    color:#666;

}



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

/* Keep long words/URLs from forcing horizontal overflow */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* -------------------------
   Tablet / small laptop
   ------------------------- */
@media (max-width: 900px) {

    header {
        padding: 16px 20px;
    }

    nav {
        position: relative;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 60px 30px;
        text-align: center;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-text p {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        order: -1;
    }

    .hero-image img {
        width: 280px;
    }

    .academic-timeline {
        margin-top: 50px;
    }

    .timeline-step {
        width: 150px;
    }

    .research-row,
    .research-row.reverse {
        gap: 40px;
        margin: 70px 0;
    }

    .research-text h3 {
        font-size: 27px;
    }

    .research-text p {
        font-size: 16px;
    }

    .teaching-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .project img {
        width: 210px;
    }

    .contact-card {
        width: min(320px, 100%);
    }
}

/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 700px) {

    header {
        padding: 14px 18px;
    }

    nav {
        min-height: 42px;
    }

    .logo {
        font-size: 20px;
    }

    /* Hamburger navigation */
    .menu-toggle {
        display: none;
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        cursor: pointer;
        margin-left: auto;
        z-index: 20;
    }

    .menu-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: #FFFDF9;
        border-radius: 2px;
        transition: 0.25s ease;
    }

    .nav-links {
        display: none !important;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0 !important;
        background: #5F6F52;
        padding: 8px 0 12px;
        border-top: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 12px 25px rgba(0,0,0,.12);
        z-index: 10;
    }

    .menu-toggle:checked ~ .nav-links {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 11px 20px;
    }

    .nav-links a:hover {
        background: rgba(255,255,255,.08);
    }

    .menu-toggle:checked + .menu-icon span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle:checked + .menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle:checked + .menu-icon span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    section {
        padding: 55px 18px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /* Hero */
    .hero {
        padding: 50px 20px 55px;
        gap: 35px;
    }

    .hero-image {
        order: -1;
    }

    .hero-image img {
        width: 230px;
        border-radius: 20px;
    }

    h1 {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.2;
    }

    h2 {
        font-size: 21px;
        line-height: 1.4;
    }

    .hero-text p {
        font-size: 15px;
        line-height: 1.75;
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .btn,
    .btn-outline {
        margin-right: 0;
        padding: 10px 20px;
    }

    /* Academic timeline becomes vertical.
       This prevents the four timeline items from being squeezed
       or overflowing on narrow screens. */
    .academic-timeline {
        display: block;
        margin-top: 45px;
        padding-left: 25px;
    }

    .timeline-line {
        top: 0;
        bottom: 0;
        left: 10px;
        right: auto;
        width: 3px;
        height: auto;
    }

    .timeline-step {
        width: 100%;
        min-height: 105px;
        padding-left: 28px;
        text-align: left;
    }

    .timeline-step .dot {
        position: absolute;
        left: 0;
        top: 2px;
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .timeline-step .date {
        margin-top: 0;
        font-size: 14px;
    }

    .timeline-step h4 {
        margin-top: 5px;
        font-size: 17px;
    }

    .timeline-step p {
        margin-top: 2px;
        font-size: 14px;
    }

    /* Research zig-zag becomes a readable vertical layout */
    .research-row,
    .research-row.reverse {
        flex-direction: column;
        gap: 28px;
        margin: 60px 0;
    }

    .research-image,
    .research-text {
        width: 100%;
    }

    .research-image img {
        border-width: 5px;
        border-radius: 17px;
    }

    .research-text h3 {
        font-size: 25px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .research-text p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .tags {
        gap: 8px;
    }

    .tags span {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Teaching */
    .teaching-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .course-grid div {
        min-height: 58px;
        padding: 13px;
    }

    .item {
        padding: 11px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Projects */
    .project {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 28px;
        padding: 18px;
        border-radius: 18px;
    }

    .project img {
        width: 100%;
        max-height: 230px;
        object-fit: cover;
    }

    .project h3 {
        font-size: 22px;
    }

    .project p {
        font-size: 15px;
        line-height: 1.7;
    }

    .tech {
        font-size: 12px;
        padding: 7px 11px;
    }

    /* Skills */
    .cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .card {
        padding: 24px 20px;
    }

    /* Contact */
    .contact-container {
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .contact-card {
        width: 100%;
        max-width: 420px;
        padding: 17px 20px;
        gap: 15px;
    }

    .contact-card i {
        font-size: 27px;
    }

    .contact-card p {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    footer {
        padding: 20px 15px;
        font-size: 14px;
    }
}

/* -------------------------
   Very small phones
   ------------------------- */
@media (max-width: 380px) {

    section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-image img {
        width: 200px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .research-text h3 {
        font-size: 23px;
    }

    .contact-card {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* On desktop, keep the hamburger hidden */
@media (min-width: 701px) {
    .menu-toggle,
    .menu-icon {
        display: none;
    }
}