:root{
  --bg:#0f172a; --panel:#111827; --border:#1f2937; --text:#e5e7eb; --muted:#9ca3af;
  --accent:#1e81b0;          /* Job title / role color */
  --org:#60a5fa;             /* Company/organization blue */
  --link:#6bb2c4;            /* All hyperlinks color */
  --shadow:rgba(0,0,0,.35);
  --radius:14px; --pad:16px; --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:var(--link)}
a:hover{filter:brightness(1.08)}

/* Header / Nav */
.site-header{position:sticky; top:0; z-index:100; background:rgba(17,24,39,.7); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border)}
.nav{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad)}
.brand{color:#fff; text-decoration:none; font-weight:700; letter-spacing:.4px}
.brand span{color:var(--accent)}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1.25rem}
.nav-links{list-style:none; display:flex; gap:18px; margin:0; padding:0}
.nav-links a{padding:8px 10px; border-radius:10px}
.nav-links a:hover{background:#0b1222}
.resume-link{border:1px solid var(--border); border-radius:10px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600}
.btn.primary{background:var(--accent); color:#04121b !important; box-shadow:0 10px 24px var(--shadow)}
.btn.ghost{border:1px solid var(--border); color:#fff !important}

/* Hero */
.hero{padding:60px var(--pad); border-bottom:1px solid var(--border)}
.hero-inner{max-width:var(--max); margin:0 auto; display:grid; gap:24px; grid-template-columns:1.15fr .85fr}
.hero-text h1{font-size:2.2rem; margin:.2rem 0}
.lead{color:var(--muted); line-height:1.6}
.cta-row{display:flex; gap:12px; margin:18px 0 8px}
.socials a{margin-right:10px; font-size:1.2rem}

/* Right column (photo only now) */
.hero-side{
  display:flex; flex-direction:column; gap:14px; align-items:center;
  justify-self:end; max-width:320px; width:100%;
}
.headshot{margin:0; width:100%; display:flex; justify-content:center}
.headshot img{
  max-width:100%; width:auto; height:auto; max-height:420px;
  border-radius:18px; border:1px solid var(--border);
  box-shadow:0 12px 28px var(--shadow); background:#0b1222;
}

/* Sections */
.container{max-width:var(--max); margin:0 auto; padding:44px var(--pad); border-bottom:1px solid var(--border)}
.section-title{font-size:1.6rem; margin:.2rem 0 16px}

/* Cards and grids */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:0 10px 26px var(--shadow)}
.grid{display:grid; gap:16px}
.skills-grid{grid-template-columns:1fr}
.edu-grid{grid-template-columns:repeat(2,1fr)}
.proj-grid{grid-template-columns:1fr}
.proj .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.proj .tags span{background:#0b1222; border:1px solid var(--border); padding:4px 8px; border-radius:999px; color:#cbd5e1; font-size:.85rem}

/* Role/Org coloring */
.role{color:var(--accent); font-weight:700}
.org{color:var(--org); font-weight:700}
.subhead{margin:.6rem 0 .4rem; color:#cbd5e1; font-weight:700}

/* Project title URL (underline + link color) */
.proj h3 .proj-url{color:var(--link) !important; text-decoration:underline}
.proj h3 .org{color:var(--org); text-decoration:none}

/* Lists */
ul{padding-left:18px}
ul ul{padding-left:18px}
.list{padding-left:18px}
.list li{margin:.35rem 0}

/* Make project bullet lists breathe a bit */
.proj ul{margin:8px 0 0}
.proj ul li{margin:.38rem 0}

/* Timeline */
.timeline{position:relative; margin-left:8px}
.timeline:before{content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border)}
.timeline-item{position:relative; padding-left:32px; margin:16px 0}
.timeline-item .dot{position:absolute; left:3px; width:14px; height:14px; background:var(--accent); border-radius:50%; top:6px; border:2px solid #0b1222}
.timeline .content{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.timeline .content h3{margin:.1rem 0 .4rem}

/* Contact */
.contact-card p{margin:.4rem 0}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* Footer */
.site-footer{padding:18px; text-align:center; color:var(--muted); border-top:1px solid var(--border)}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-side{justify-self:center; max-width:260px}
  .edu-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{display:none; flex-direction:column; background:#0b1222; position:absolute; right:10px; top:54px; padding:10px; border-radius:12px; border:1px solid var(--border)}
  .nav-links.show{display:flex}
}