:root{
  --nav:#000035;
  --btn:#000035;
  --text:#0a0a0a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto; color:var(--text); background:#fff}

.site-header{position:fixed; top:0; left:0; right:0; z-index:1000; padding:16px 24px; background:transparent}
.nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0; justify-content:flex-end}
.nav a{color:#fff; text-decoration:none; font-weight:600; letter-spacing:.02em; padding:8px 14px; border-radius:8px; border:2px solid transparent}
.nav a.active{border-color:#fff}
/* Hero */
.hero{position:relative; min-height:92vh; display:flex; align-items:center}
.hero-bg{position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.15)), url('assets/hero.jpg') center/cover no-repeat; filter:none}
.hero-content{position:relative; max-width:780px; padding:24px; margin-left:5vw; color:#fff}
.title{font-family:'Playfair Display', serif; font-size:44px; line-height:1.15; margin:0 0 14px}
.lede{font-size:18px; line-height:1.7; max-width:720px}
.btn{display:inline-block; margin-top:20px; background:var(--btn); color:#fff; padding:12px 22px; border-radius:28px; text-decoration:none; font-weight:700}

/* Page containers */
.container{max-width:980px; margin:0 auto; padding:120px 20px 60px}
.page h1{font-family:'Playfair Display', serif; color:var(--nav); font-size:36px; margin-top:0}
.page h2{font-family:'Playfair Display', serif; color:var(--nav); font-size:24px}
.roles .role{margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid #eee}
.roles h3{font-family:'Playfair Display', serif; margin:.2rem 0}
.bullet{padding-left:18px}
.bullet li{margin:10px 0}
.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* Footer */
.site-footer{background:#f5f7ff; border-top:1px solid #e6e8ff; color:#111}
.site-footer .container{padding:26px 20px; text-align:center}
.site-footer .name{font-family:'Playfair Display', serif; font-size:20px; color:var(--nav); margin:0 0 6px}
.site-footer a{color:var(--nav); font-weight:700; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:900px){
  .nav a{padding:6px 10px}
  .hero-content{margin-left:4vw}
  .grid-two{grid-template-columns:1fr}
}
/* Make the header text readable over image by overlaying dark header gradient */
.site-header::before{content:''; position:absolute; inset:0; height:64px; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); z-index:-1}


/* Resume link styling */
.resume-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--nav);
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--nav);
  padding: 6px 12px;
  border-radius: 20px;
}
.resume-link:hover {
  background: var(--nav);
  color: #fff;
}
.resume-link span {
  font-family: 'Open Sans', sans-serif;
}