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

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

body{

font-family:'Open Sans',sans-serif;

background:#f5efe9;

color:#2c2c2c;

line-height:1.6;

}

/* Container */

.container{
width:92%;
max-width:1280px;
margin:auto;
}


/* =========================
HEADINGS
========================= */

h1,h2,h3,h4{

font-family:'Poppins',sans-serif;
color:#173f46;

}

h1{

font-size:48px;
margin-bottom:10px;

}

h2{

font-size:34px;
margin-bottom:20px;

}

h3{

font-size:22px;

}

.section-sub{

color:#6a6a6a;
margin-bottom:40px;

}

section{
border-bottom:1px solid #e6ddd3;
}


/* =========================
NAVIGATION
========================= */

.main-nav{

background:#efe7de;

border-bottom:1px solid #e6e0da;

padding:20px 0;

position:sticky;
top:0;
z-index:1000;

}

.nav-flex{

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

}

.logo{

font-size:20px;
font-weight:700;
color:#1f4c57;

}

.nav-links{

list-style:none;
display:flex;
gap:30px;

}

.nav-links a{

text-decoration:none;
font-weight:600;
color:#1f4c57;

transition:.2s;

}

.nav-links a:hover{
color:#c06a44;
border-bottom:2px solid #c06a44;
}

/* =========================
HERO
========================= */

.hero{
padding:90px 0;

background:linear-gradient(
    180deg,
    #f5efe9 0%,
    #e9dccd 100%
);
}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.hero-role{

color:#1f4c57;

margin:12px 0 20px 0;

font-weight:600;

}

.hero-text p{

margin-bottom:15px;

color:#444;

}

.hero-buttons{

margin-top:25px;

display:flex;

gap:15px;

}

.hero-image img{
width:100%;
max-width:460px;
border-radius:8px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}


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

.btn-primary{

background:#1f4c57;

color:white;

padding:12px 22px;

border-radius:6px;

text-decoration:none;

font-weight:600;

display:inline-block;

transition:.2s;

}

.btn-primary:hover{

background:#173a42;

transform:translateY(-1px);

}

.btn-secondary{

border:2px solid #c06a44;

color:#c06a44;

padding:10px 20px;

border-radius:6px;

text-decoration:none;

font-weight:600;

transition:.2s;

}

.btn-secondary:hover{

background:#c06a44;

color:white;

}


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

.about-section{

padding:90px 0;

background:#efe7de;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}

.about-grid{
grid-template-columns:1fr 1fr;
gap:60px;
}

.about-left p{

margin-bottom:20px;

}

.about-left img{
width:100%;
max-width:320px;
border-radius:6px;
box-shadow:0 8px 30px rgba(0,0,0,.07);
}

.about-right{

display:flex;
align-items:center;

}

.info-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.info-grid h4{

font-size:14px;

color:#c06a44;

margin-bottom:5px;

letter-spacing:.5px;

text-transform:uppercase;

}

.info-grid p{

font-weight:600;

color:#173f46;

}


/* =========================
PORTFOLIO
========================= */

.portfolio{

padding:100px 0;

}

.portfolio-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

margin-top:40px;

}

.portfolio-card{
background:#faf6f1;
border:1px solid #e3d9cf;
padding:32px;
border-radius:10px;
border:1px solid #e8e2db;
transition:.25s;

display:flex;
flex-direction:column;
}

.portfolio-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,.08);
}

.portfolio-card h3{

margin-bottom:14px;

}

.portfolio-card p{
margin-bottom:22px;
color:#555;
line-height:1.6;
}

.tech-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:25px;

}

.tech-tags span{
background:#edf4f6;
color:#1f4c57;
padding:7px 12px;
border-radius:5px;
font-size:12px;
font-weight:600;
letter-spacing:.2px;
}

.portfolio-card .btn-primary{
margin-top:auto;
align-self:flex-start;
}

.project-preview{
width:100%;
border-radius:8px;
margin-bottom:22px;

border:1px solid #e2d8ce;

box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 10px 30px rgba(0,0,0,0.04);

transition:.25s ease;
}

.portfolio-card:hover .project-preview{
transform:scale(1.03);
}


/* =========================
CONTACT
========================= */

.contact{
padding:100px 0;
background:#efe7de;
}

.contact-wrapper{
max-width:600px;
margin:auto;
}

.contact-links{
margin-top:30px;
display:grid;
gap:20px;
}

.contact-item h4{
font-size:14px;
color:#c06a44;
margin-bottom:5px;
text-transform:uppercase;
letter-spacing:.5px;
}

.contact-item a{
font-weight:600;
color:#1f4c57;
text-decoration:none;
}

.contact-item a:hover{
color:#c06a44;
}


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

footer{

padding:25px 0;

border-top:1px solid #e6e0da;

background:#efe7de;

}

.footer-flex{

display:flex;

justify-content:space-between;

align-items:center;

}

.footer-links{

display:flex;

gap:20px;

}

.footer-links a{

text-decoration:none;

color:#1f4c57;

font-weight:600;

}

.footer-links a:hover{

color:#c06a44;

}

/* RESUME */

.resume-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
margin-top:80px;
background:#faf6f1;
border:1px solid #e3d9cf;
padding:50px;
border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,0.04);
margin-top:70px;
}

.resume-title{
font-size:26px;
margin-bottom:30px;
font-weight:600;
}

.resume-item{
margin-bottom:45px;
}

.resume-item h4{
font-size:18px;
margin-bottom:6px;
font-weight:600;
color:#173f46;
}

.resume-date{
font-size:14px;
color:#777;
display:block;
margin-bottom:10px;
}

/* .resume-button{
margin-top:20px;
display:inline-block;
} */

.about-left{
display:flex;
flex-direction:column;
}

.resume-button{
align-self:flex-start;
margin-top:20px;
}

/* SKILLS */

.skills-section{
margin-top:60px;
}

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
margin-top:20px;
}

.skills-grid span{
background:#eef4f6;
padding:12px 16px;
border-radius:6px;
font-size:14px;
font-weight:500;
color:#1f4c57;
}

/* MOBILE */

@media (max-width:900px){

.hero-grid,
.about-grid,
.portfolio-grid,
.contact-grid,
.resume-container{

grid-template-columns:1fr;

}

.hero{
padding:60px 0;
}

h1{
font-size:36px;
line-height:1.2;
}

.nav-links{
gap:15px;
}

}

/* =========================
FIELD NOTES
========================= */


.field-notes{
max-width:760px;
margin:60px auto 0 auto;
display:flex;
flex-direction:column;
gap:50px;
}

.note-entry{
padding-bottom:30px;
border-bottom:1px solid #e3d9cf;
}

.note-date{
font-size:13px;
letter-spacing:.6px;
text-transform:uppercase;
color:#c06a44;
display:block;
margin-bottom:10px;
}

.note-entry h3{
margin-bottom:10px;
font-size:24px;
}

.note-entry p{
color:#555;
margin-bottom:14px;
line-height:1.6;
}

.note-entry a{
font-weight:600;
color:#1f4c57;
text-decoration:none;
}

.note-entry a:hover{
color:#c06a44;
}

.section-header h2::after{
content:"";
display:block;
width:60px;
height:2px;
background:#c06a44;
margin-top:12px;
}

.article-image-single {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
}

.article-image-single img {
    width: 100%;
    max-width: 500px;
    border-radius: 6px;
    object-fit: cover;
}

/* =========================
ARTICLE
========================= */

.article{
padding:100px 0;
}

.article-container{
max-width:760px;
margin:auto;
background:#fdfaf6;
padding:60px 70px;
border-radius:8px;
box-shadow:0 10px 35px rgba(0,0,0,.06);
border:1px solid #e6ded6;
}

.article-container h1{
margin-bottom:20px;
}
.article-container p{
margin-bottom:20px;
line-height:1.75;
font-size:16px;
color:#2c2c2c;
}

.article-container h2{
margin-top:40px;
margin-bottom:12px;
font-size:24px;
color:#173f46;
}

.article-intro{
font-size:18px;
color:#444;
margin-bottom:30px;
}

.section-label{
display:block;
font-size:12px;
letter-spacing:1.5px;
text-transform:uppercase;
color:#c06a44;
margin-bottom:6px;
font-weight:600;
}

.article-container ul {
  margin: 1rem 0 2rem 1.5rem;
  padding-left: 1rem;
}

.article-container li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}