
:root{
  --green-deep:#2f3b33; --green:#5c6b5b;
  --terracotta:#5A3A33; --coral:#D99985; --peach:#E8C6B5;
  --cream:#F3E9E3; --paper:#FFF9F4; --ink:#1b1716;
  --radius:22px; --shadow:0 16px 36px rgba(0,0,0,.16);
  --font-serif:"Fraunces", serif; --font-sans:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink)}

/* Nav */
nav.site{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;background:rgba(243,233,227,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08)}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--coral),var(--terracotta));color:#fff;display:grid;place-items:center;font-weight:900}
.logo span{font-family:var(--font-serif);font-size:22px;color:var(--terracotta)}
nav.site .links a{margin-left:18px;text-decoration:none;color:var(--terracotta);font-weight:700}
nav.site .links a:hover{text-decoration:underline}

/* Hero */
.hero-wrap{position:relative;overflow:hidden;background:var(--green-deep);border-bottom:12px solid #1b211c}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;max-width:1100px;margin:0 auto;padding:86px 28px}
.hero .big{font-family:var(--font-serif);font-size:72px;line-height:.9;color:#fff;letter-spacing:1px}
.hero .sub{color:#e7efe9;opacity:.92;font-size:18px;max-width:580px}
.hero .cta{margin-top:22px;display:flex;gap:10px}
.btn{appearance:none;border:none;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;text-decoration:none}
.btn.primary{background:#F2B37F;color:#1f160f}
.btn.secondary{background:#fff;color:#1f160f;border:2px solid #1f160f}
.hero .orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.25}
.hero .orb.one{width:320px;height:320px;background:radial-gradient(circle,var(--coral),transparent 60%);top:-40px;left:-60px}
.hero .orb.two{width:280px;height:280px;background:radial-gradient(circle,var(--peach),transparent 60%);bottom:-60px;right:-40px}

/* Sections / cards */
.section{max-width:1100px;margin:48px auto;padding:0 28px 40px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);padding:22px}
h2.title{font-family:var(--font-serif);font-size:36px;color:var(--terracotta);margin:10px 0}
p.lead{color:#5a524e;max-width:760px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

/* Project row on home */
.row-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:24px}
.row-cards .mini{min-width:0}

/* Organizations styles */
.badge{padding:8px 12px;border-radius:999px;background:var(--peach);color:var(--terracotta);font-weight:700}
.step{display:flex;gap:12px}
.step .dot{width:14px;height:14px;border-radius:4px;background:var(--terracotta);margin-top:6px}

/* Footer + reveal */
footer{padding:30px 28px;text-align:center;color:#6f6661}
.reveal{opacity:0;transform:translateY(10px);transition:.5s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:960px){.hero{grid-template-columns:1fr}}


/* ===== Resume design ===== */
.resume-hero{background:var(--green-deep);border-bottom:12px solid #1b211c;color:#fff}
.resume-hero .inner{max-width:1100px;margin:0 auto;padding:56px 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.resume-hero h1{font-family:var(--font-serif);font-size:46px;margin:0}
.resume-hero p{opacity:.92;line-height:1.5}

.resume-grid{max-width:1100px;margin:34px auto 48px;padding:0 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:960px){.resume-hero .inner{grid-template-columns:1fr}.resume-grid{grid-template-columns:1fr}}

.pill{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--peach);color:var(--terracotta);font-weight:700;margin:6px 6px 0 0}
.pill.alt{background:#fff;color:var(--olive);border:2px solid var(--olive)}

.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:rgba(0,0,0,.12)}
.timeline .t-item{position:relative;margin:0 0 14px 0}
.timeline .t-item::before{content:"";position:absolute;left:-2px;top:8px;width:10px;height:10px;border-radius:3px;background:var(--terracotta)}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.kv{grid-template-columns:1fr}}
