:root{
  --ink:#221E18;
  --muted:#726B5E;
  --muted-on-dark:#B9AFA0;
  --paper:#FAF7F2;
  --panel:#FFFFFF;
  --line:#E7E0D3;
  --line-on-dark:#3A342A;
  --charcoal:#1C1811;
  --charcoal-2:#241F17;
  --gold:#B3812F;
  --gold-deep:#8F6624;
  --gold-tint:#F3E7D2;
  --sans:'Inter', sans-serif;
  --disp:'Fraunces', serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

.wrap{width:min(1140px,90%);margin:0 auto;}

::selection{background:var(--gold); color:#fff;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(250,247,242,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{height:76px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-logo{height:32px; width:auto; display:block;}
.brand-tag{font-size:11px; color:var(--muted); letter-spacing:.03em; margin-left:2px; border-left:1px solid var(--line); padding-left:12px; font-weight:500;}
.nav-right{display:flex; align-items:center; gap:30px;}
.nav-links{display:flex; gap:30px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--ink); opacity:.72; transition:.2s;}
.nav-links a:hover{opacity:1; color:var(--gold-deep);}
.lang-switch{display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; padding:2px;}
.lang-switch button{border:none; background:none; color:var(--muted); font-size:11.5px; font-weight:600; padding:5px 12px; cursor:pointer; letter-spacing:.03em; border-radius:16px; transition:.2s;}
.lang-switch button.active{background:var(--ink); color:#fff;}
.menu-btn{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn span{width:20px; height:1.5px; background:var(--ink);}

@media (max-width:860px){
  .nav-links{position:fixed; top:76px; left:0; width:100%; background:var(--panel); flex-direction:column;
    padding:20px 6%; gap:18px; border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s;}
  .nav-links.active{transform:translateY(0); opacity:1; pointer-events:auto;}
  .menu-btn{display:flex;}
  .brand-tag{display:none;}
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh; padding:160px 0 100px; position:relative; overflow:hidden; background:var(--charcoal); color:#fff;
}
.hero::before{
  content:""; position:absolute; top:-20%; right:-10%; width:60%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(179,129,47,.16), transparent 68%); pointer-events:none;
}
.hero .wrap{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center;}

.kicker{font-size:12.5px; font-weight:600; letter-spacing:.09em; color:var(--gold); text-transform:uppercase; margin-bottom:22px;
  opacity:0; animation:rise .7s .05s ease-out forwards;}
.hero h1{
  font-family:var(--disp); font-weight:600; font-size:clamp(32px,4.3vw,52px);
  line-height:1.2; letter-spacing:-.01em; max-width:16ch; margin-bottom:26px;
  opacity:0; animation:rise .7s .15s ease-out forwards;
}
.hero-desc{max-width:50ch; color:#D8D1C4; font-size:17px; margin-bottom:38px;
  opacity:0; animation:rise .7s .28s ease-out forwards;}
.hero-buttons{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;
  opacity:0; animation:rise .7s .4s ease-out forwards;}
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.btn{padding:14px 26px; font-size:14.5px; font-weight:600; border-radius:30px; transition:.25s; display:inline-block; border:1px solid transparent;}
.btn-primary{background:var(--gold); color:#fff;}
.btn-primary:hover{background:var(--gold-deep);}
.btn-outline{border-color:rgba(255,255,255,.3); color:#fff;}
.btn-outline:hover{background:#fff; color:var(--charcoal);}

.stat-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line-on-dark); max-width:560px;
  opacity:0; animation:rise .7s .5s ease-out forwards;}
.stat-strip div{padding:18px 20px 0 20px; border-left:1px solid var(--line-on-dark);}
.stat-strip div:first-child{border-left:none; padding-left:0;}
.stat-strip strong{display:block; color:#fff; font-family:var(--disp); font-size:24px; font-weight:600; margin-bottom:4px;}
.stat-strip span{font-size:11.5px; color:var(--muted-on-dark); line-height:1.4; display:block;}
@media (max-width:520px){ .stat-strip{grid-template-columns:1fr; row-gap:18px;} .stat-strip div{border-left:none; padding-left:0;} }

/* hero photo */
.photo-stack{position:relative; display:flex; justify-content:center;}
.photo-frame{
  width:320px; height:400px; position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  opacity:0; animation:rise .8s .3s ease-out forwards;
}
.photo-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease-in-out;}
.photo-frame img.is-active{opacity:1;}
.photo-caption-bar{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.photo-caption-bar .name{font-family:var(--disp); font-size:15px; font-weight:600; color:#fff;}
.photo-caption-bar .role{font-size:11.5px; color:#E4DCCB; margin-top:2px;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:56px;}
  .photo-stack{order:-1;}
  .photo-frame{width:260px; height:330px;}
}

/* ---------- section shell ---------- */
section{padding:120px 0;}
.eyebrow{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; color:var(--gold-deep); margin-bottom:20px; text-transform:uppercase;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold); border-radius:2px;}
h2{font-family:var(--disp); font-weight:600; font-size:clamp(28px,3vw,40px); letter-spacing:-.01em; max-width:17ch; margin-bottom:18px;}
.section-intro{color:var(--muted); max-width:58ch; font-size:16.5px;}
.section-head{margin-bottom:60px;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:76px;}
.about-text p{color:var(--muted); margin-bottom:20px; font-size:16px; max-width:56ch;}
.about-text p:last-child{margin-bottom:0;}
.spec-sheet{display:flex; flex-direction:column; gap:0;}
.spec-row{display:flex; justify-content:space-between; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); gap:16px;}
.spec-row:first-child{border-top:1px solid var(--line);}
.spec-label{font-size:13.5px; color:var(--muted); font-weight:500;}
.spec-value{font-family:var(--disp); font-weight:600; font-size:22px; color:var(--ink); white-space:nowrap;}

@media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:44px;} }

/* ---------- experience ---------- */
.timeline{border-left:2px solid var(--line); margin-left:4px;}
.tl-item{position:relative; padding:0 0 52px 36px;}
.tl-item:last-child{padding-bottom:0;}
.tl-marker{position:absolute; left:-8px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line);}
.tl-item.is-current .tl-marker{border-color:var(--gold); background:var(--gold);}
.tl-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.tl-date{font-size:13px; color:var(--muted); font-weight:500;}
.tl-pill{font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:3px 10px; border-radius:20px; background:var(--gold-tint); color:var(--gold-deep); text-transform:uppercase;}
.tl-item h3{font-family:var(--disp); font-size:20px; font-weight:600; margin-bottom:4px;}
.tl-item h4{font-size:14.5px; font-weight:500; color:var(--gold-deep); margin-bottom:14px;}
.tl-item p{color:var(--muted); font-size:15.5px; max-width:62ch;}

/* ---------- projects ---------- */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.project-card{background:var(--panel); border-radius:16px; padding:32px 26px; box-shadow:0 2px 10px rgba(34,30,24,.05); border:1px solid var(--line); transition:.25s;}
.project-card:hover{box-shadow:0 16px 34px -14px rgba(34,30,24,.16); transform:translateY(-3px);}
.project-icon{width:38px; height:38px; color:var(--gold-deep); margin-bottom:22px;}
.project-icon svg{width:100%; height:100%;}
.project-card h3{font-family:var(--disp); font-weight:600; font-size:17px; margin-bottom:10px; line-height:1.3;}
.project-card p{font-size:14px; color:var(--muted); margin-bottom:18px;}
.project-tags{display:flex; flex-wrap:wrap; gap:8px;}
.project-tags span{font-size:11px; font-weight:500; color:var(--gold-deep); background:var(--gold-tint); border-radius:20px; padding:4px 11px;}

.project-cta{margin-top:36px; background:var(--charcoal); border-radius:18px; padding:48px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff;}
.project-cta h3{font-family:var(--disp); font-weight:600; font-size:24px; margin-bottom:8px;}
.project-cta p{color:var(--muted-on-dark); font-size:15px; max-width:44ch;}

@media (max-width:980px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .project-grid{grid-template-columns:1fr;} .project-cta{padding:36px 28px;} }

/* ---------- skills ---------- */
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.skill-card{padding:26px 24px; border-radius:14px; background:var(--panel); border:1px solid var(--line);}
.skill-card h3{font-family:var(--disp); font-size:16px; font-weight:600; margin-bottom:8px;}
.skill-card p{font-size:13.5px; color:var(--muted);}
@media (max-width:860px){ .skills-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .skills-grid{grid-template-columns:1fr;} }

/* ---------- education / credentials ---------- */
.cred-list{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cred{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px;}
.cred-mark{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--gold-deep); margin-bottom:14px; text-transform:uppercase;}
.cred h3{font-family:var(--disp); font-weight:600; font-size:16px; margin-bottom:8px; line-height:1.3;}
.cred p{font-size:13px; color:var(--muted);}
@media (max-width:860px){ .cred-list{grid-template-columns:1fr;} }

/* ---------- contact ---------- */
.contact{background:var(--charcoal); color:#fff; position:relative; overflow:hidden;}
.contact::before{
  content:""; position:absolute; bottom:-30%; left:-10%; width:55%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(179,129,47,.14), transparent 68%); pointer-events:none;
}
.contact .wrap{position:relative; z-index:2;}
.contact .eyebrow{color:var(--gold);}
.contact .eyebrow::before{background:var(--gold);}
.contact h2{color:#fff; max-width:15ch;}
.contact-intro{color:#D8D1C4; max-width:52ch; font-size:16.5px; margin-bottom:50px;}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:start;}

.contact-list a{display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line-on-dark); transition:.2s;}
.contact-list a:hover{padding-left:8px; color:var(--gold);}
.contact-list .cmd{font-size:12px; color:var(--muted-on-dark); font-weight:500; letter-spacing:.03em; text-transform:uppercase;}
.contact-list .val{font-family:var(--disp); font-size:17px; font-weight:600;}

.contact-form{background:var(--panel); border-radius:20px; padding:38px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.contact-form h3{font-family:var(--disp); font-size:21px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.contact-form .form-sub{font-size:13.5px; color:var(--muted); margin-bottom:26px;}
.form-row{margin-bottom:18px; display:flex; flex-direction:column; gap:7px;}
.form-row label{font-size:12.5px; font-weight:600; color:var(--ink);}
.form-row input, .form-row textarea{
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px; color:var(--ink);
  font-family:var(--sans); font-size:15px; padding:12px 14px; resize:vertical; transition:.2s;
}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--gold);}
.form-submit{border:none; cursor:pointer; width:100%; margin-top:4px; padding:15px 26px;}
.form-submit:disabled{opacity:.6; cursor:default;}
.form-note{font-size:12px; color:var(--muted); margin-top:14px; text-align:center;}

@media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }

footer{padding:36px 0; border-top:1px solid var(--line-on-dark); position:relative; z-index:2;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-logo{height:22px; width:auto; opacity:.9;}
.foot-copy{font-size:12.5px; color:var(--muted-on-dark);}
.foot-top{font-size:12.5px; color:var(--muted-on-dark); transition:.2s;}
.foot-top:hover{color:var(--gold);}