:root{
  --bg:#f8f4ec;
  --fg:#2b1f17;
  --muted:#7a6a5c;
  --border:#e4dccf;
  --card:#ffffff;
  --secondary:#efe7d8;
  --primary:#a04a1f;         /* burnt orange */
  --primary-fg:#fdf7ee;
  --accent:#e08a3c;          /* warm gold */
  --shadow-soft: 0 1px 2px rgba(43,31,23,.04), 0 8px 30px rgba(43,31,23,.06);
  --shadow-elegant: 0 20px 60px -20px rgba(160,74,31,.3);
  --radius: 14px;
}

*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border);}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;letter-spacing:-.02em;font-weight:500;line-height:1.05;}
a{color:inherit;text-decoration:none;}
em{font-style:italic;color:var(--primary);}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);}

/* Enhanced Transitions & Premium Micro-Interactions on Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, box-shadow 0.3s;
}
.btn-primary{background:var(--primary);color:var(--primary-fg);box-shadow:var(--shadow-elegant);}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 24px 48px -12px rgba(160,74,31,.45); opacity: 1;}
.btn-outline{border:1px solid var(--border); background: transparent;}
.btn-outline:hover{background:var(--secondary); transform: translateY(-2px);}
.btn-dark{background:var(--fg);color:var(--bg);padding:8px 16px;font-size:13px;}
.btn-dark:hover{transform: translateY(-1px);}
.arrow{display:inline-block;transform:translateY(-1px);}

/* Header */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(248,244,236,.75);border-bottom:1px solid var(--border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.brand{font-family:'Fraunces',serif;font-size:18px;font-weight:600;}
.brand span{color:var(--primary);}
nav.links{display:none;gap:32px;font-size:14px;color:var(--muted);}
nav.links a:hover{color:var(--fg);}
@media(min-width:768px){nav.links{display:flex;}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:96px 0 120px;}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(224,138,60,.25), transparent 70%),
    radial-gradient(50% 40% at 10% 20%, rgba(160,74,31,.18), transparent 70%);}
.tag-line{display:flex;align-items:center;gap:12px;margin-bottom:32px;}
.tag-line .bar{width:32px;height:1px;background:var(--primary);}
.hero h1{font-size:clamp(40px,7vw,96px);max-width:1000px;}
.hero-foot{margin-top:40px;display:flex;flex-direction:column;gap:32px;}
.hero-foot p{max-width:560px;font-size:18px;color:var(--muted);}
.hero-foot .name{color:var(--fg);font-weight:500;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
@media(min-width:768px){.hero-foot{flex-direction:row;align-items:flex-end;justify-content:space-between;}}

/* Marquee strip */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(239,231,216,.5);}
.strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;padding:16px 0;font-size:14px;text-align:center;}
.strip .sep{color:var(--border);}
.strip .italic{font-family:'Fraunces',serif;font-style:italic;color:var(--primary);font-weight:500;}
@media(max-width:480px){
  .strip-inner{gap:8px 12px;font-size:13px;padding:12px 0;}
  .strip .sep{display:none;}
  .strip-inner span{background:rgba(43,31,23,0.04);padding:4px 10px;border-radius:6px;}
  .strip-inner span.italic{background:rgba(160,74,31,0.08);color:var(--primary);}
}

/* Sections */
section{padding:96px 0;}
.section-head h2{font-size:clamp(32px,4.5vw,48px);margin-top:16px;}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;}
@media(max-width:900px){.grid-12{grid-template-columns:1fr;}}

/* About */
.about-copy{grid-column:6 / span 7;display:flex;flex-direction:column;gap:24px;color:var(--muted);font-size:18px;line-height:1.7;}
.about-head{grid-column:1 / span 4;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:24px;}
.stat{border-top:1px solid var(--border);padding-top:16px;}
.stat .num{font-family:'Fraunces',serif;font-size:32px;color:var(--fg);}
.stat .lbl{font-size:14px;color:var(--muted);}
@media(max-width:900px){.about-copy,.about-head{grid-column:auto;}}

/* Skills Toolkit with Premium SVG styling */
.skills{background:rgba(239,231,216,.5);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:64px;}
.skill-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--shadow-soft);transition:.2s;}
.skill-card:hover{border-color:rgba(160,74,31,.4); transform: translateY(-4px); box-shadow: var(--shadow-elegant);}
.skill-card .icon-svg{width:28px;height:28px;color:var(--primary);margin-bottom:24px; display:block;}
.skill-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;}
.skill-card li{list-style:none;font-family:'Fraunces',serif;font-size:20px;margin-top:2px;}

/* Experience Section Styles */
.exp-list{grid-column:6 / span 7;display:flex;flex-direction:column;gap:32px;}
.exp-head{grid-column:1 / span 4;}
.exp-item{display:flex;gap:24px;padding-bottom:32px;border-bottom:1px solid var(--border);}
.exp-item:last-child{border-bottom:0;}
.exp-year{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--muted);width:140px;flex-shrink:0;padding-top:4px;}
.exp-item h3{font-size:22px;}
.exp-item .org{color:var(--muted);margin-top:4px;font-weight: 500;}
.exp-item ul{margin-top:16px;padding-left:18px;color:var(--muted);font-size:15px;}
.exp-item li{margin-bottom:8px;line-height:1.6;}
@media(max-width:900px){.exp-list,.exp-head{grid-column:auto;} .exp-item{flex-direction:column;gap:8px;} .exp-year{width:auto;}}

/* Projects & Visit Buttons Grid Layout */
.projects {background:rgba(239,231,216,.5); border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.projects .list{display:flex;flex-direction:column;gap:24px;margin-top:64px;}
.project{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:36px;transition:.2s;cursor:pointer;}
.project:hover{box-shadow:var(--shadow-elegant);transform:translateY(-2px);}
.project-grid{display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:flex-start;}
.project .num{font-family:'Fraunces',serif;font-size:22px;color:var(--muted);}
.project .tag{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--primary);margin-bottom:12px;}
.project h3{font-size:clamp(22px,3vw,32px);margin-bottom:12px;}
.project p{color:var(--muted);max-width:560px;}
.project-actions {display:flex; flex-direction:column; gap:14px; text-align:right;}
.project .cta{font-size:14px;font-weight:500;white-space:nowrap; transition: color 0.2s;}
.project:hover .cta{color:var(--fg);}
.project .visit-btn {color: var(--primary);}
.project .visit-btn:hover {color: var(--accent); text-decoration: underline;}

@media(max-width:700px){
  .project-grid{grid-template-columns:1fr;}
  .project-actions{flex-direction: row; justify-content: flex-start; gap: 24px; padding-top: 12px; text-align: left;}
}

/* Education */
.education{background: transparent; border-top:0; border-bottom:1px solid var(--border);}
.edu-list{grid-column:6 / span 7;display:flex;flex-direction:column;gap:32px;}
.edu-head{grid-column:1 / span 4;}
.edu-item{display:flex;gap:24px;padding-bottom:32px;border-bottom:1px solid var(--border);}
.edu-item:last-child{border-bottom:0;}
.edu-year{font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--muted);width:120px;flex-shrink:0;padding-top:4px;}
.edu-item h3{font-size:22px;}
.edu-item .org{color:var(--muted);margin-top:4px;}
.badge{display:inline-block;margin-top:8px;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(160,74,31,.1);color:var(--primary);font-weight:500;}
@media(max-width:900px){.edu-list,.edu-head{grid-column:auto;} .edu-item{flex-direction:column;gap:8px;} .edu-year{width:auto;}}

/* Contact */
.contact{text-align:center;padding:96px 0 144px;}
.contact h2{font-size:clamp(40px,6vw,80px);max-width:800px;margin:24px auto 0;}
.contact p{margin-top:24px;font-size:18px;color:var(--muted);}
.contact .btn{margin-top:40px;padding:16px 32px;font-size:16px;}

/* Footer */
footer{border-top:1px solid var(--border);}
.foot{display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:space-between;padding:40px 0;font-size:14px;color:var(--muted);}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;}
.foot-links a{display:inline-flex;align-items:center;gap:8px;}
.foot-links a:hover{color:var(--fg);}
@media(min-width:700px){.foot{flex-direction:row;}}

/* Modal Popup Styles */
.project-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 31, 23, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.project-modal.active {
  display: flex;
}
.modal-content {
  background: var(--card, #ffffff);
  color: var(--fg, #2b1f17);
  max-width: 650px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 30px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border: 1px solid var(--border, #e4dccf);
  animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
  from { transform: translateY(15px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--secondary, #efe7d8);
  border: none;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg, #2b1f17);
  transition: background 0.2s;
}
.modal-close:hover {
  background: var(--border, #e4dccf);
}
.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--primary, #a04a1f);
}
.modal-meta {
  font-size: 0.9rem;
  color: var(--muted, #7a6a5c);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-section {
  margin-bottom: 20px;
}
.modal-section h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--fg, #2b1f17);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.modal-section p {
  color: #443c35;
  line-height: 1.6;
}