/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --navy:        #0a1628;
  --navy-mid:    #0e2044;
  --navy-card:   #111d35;
  --navy-border: #1a2f52;
  --blue:        #1e6fd9;
  --blue-light:  #3d9bff;
  --blue-glow:   #60b4ff;
  --blue-pale:   #a8d4ff;
  --text:        #e8f0fe;
  --text-dim:    #7d9bc0;
  --text-muted:  #445e80;
  --white:       #ffffff;
  --mono:        'DM Mono', monospace;
  --serif:       'DM Serif Display', serif;
  --sans:        'DM Sans', sans-serif;
  --radius:      10px;
  --transition:  0.2s ease;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--blue-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-glow); }
img { display: block; max-width: 100%; }

/* ─── Background Grid ────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='none' stroke='rgba(61%2C155%2C255%2C0.22)' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  transform: rotate(45deg);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 75%);
  mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Layout ─────────────────────────────────────────────────── */
.page { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }

/* ─── Nav ────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 0;
  background: linear-gradient(to bottom, var(--navy) 70%, transparent);
}
nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all var(--transition);
}
nav a:hover { color: var(--blue-glow); border-color: var(--navy-border); background: var(--navy-card); }

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 32px;
  padding: 36px;
  margin-top: 16px;
  background: rgba(10,22,40,0.75);
  border: 1px solid var(--navy-border);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeUp 0.5s ease both;
}
.hero-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 14px;
}
.hero-name {
  font-family: var(--serif);
  font-size: clamp(38px, 7vw, 62px);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.hero-title { font-size: 16px; color: var(--blue-pale); font-weight: 300; margin-bottom: 22px; }
.hero-bio { font-size: 14px; color: var(--text-dim); max-width: 520px; line-height: 1.7; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--navy-border);
  border-radius: 20px;
  transition: all var(--transition);
}
.hero-links a:hover { color: var(--blue-glow); border-color: var(--blue); background: rgba(30,111,217,0.08); }
.hero-links svg { width: 13px; height: 13px; }

/* ─── Headshot ───────────────────────────────────────────────── */
.headshot-wrap { flex-shrink: 0; position: relative; width: 84px; height: 84px; }
.headshot { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--navy); }
.headshot-placeholder {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--navy-card); border: 3px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.headshot-placeholder svg { width: 32px; height: 32px; color: var(--text-muted); }

/* ─── Section Cards ──────────────────────────────────────────── */
section {
  padding: 32px;
  margin-top: 24px;
  background: rgba(10,22,40,0.75);
  border: 1px solid var(--navy-border);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.section-line { flex: 1; height: 1px; background: var(--navy-border); }

/* ─── Work Experience ────────────────────────────────────────── */
.employer-block { margin-bottom: 40px; }
.employer-block:last-child { margin-bottom: 0; }
.employer-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.employer-logo { width: 48px; height: 24px; object-fit: contain; object-position: left center; opacity: 0.85; flex-shrink: 0; }
.employer-logo-placeholder {
  width: 48px; height: 24px; border-radius: 4px;
  background: var(--navy-card); border: 1px solid var(--navy-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.employer-logo-placeholder span { font-family: var(--mono); font-size: 8px; color: var(--text-muted); letter-spacing: 0.05em; }
.employer-name { font-size: 16px; font-weight: 500; color: var(--white); }
.employer-meta { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.roles { padding-left: 24px; border-left: 1px solid var(--navy-border); }
.role { position: relative; padding: 0 0 28px 24px; }
.role:last-child { padding-bottom: 0; }
.role::before {
  content: ''; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--navy); box-shadow: 0 0 0 1px var(--blue);
}
.role-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.role-period { font-family: var(--mono); font-size: 11px; color: var(--blue-light); margin-bottom: 10px; }
.role-bullets { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.role-bullets li { font-size: 13.5px; color: var(--text-dim); padding-left: 16px; position: relative; line-height: 1.6; }
.role-bullets li::before { content: '›'; position: absolute; left: 0; color: var(--blue); font-size: 15px; line-height: 1.45; }

/* ─── Education ──────────────────────────────────────────────── */
.edu-grid { display: flex; flex-direction: column; gap: 24px; }
.edu-card {
  background: var(--navy-card); border: 1px solid var(--navy-border);
  border-radius: var(--radius); padding: 22px 24px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: start; transition: border-color var(--transition);
}
.edu-card:hover { border-color: var(--blue); }
.edu-logo-wrap { width: 56px; height: 28px; display: flex; align-items: center; }
.edu-logo { width: 56px; height: 28px; object-fit: contain; object-position: left center; opacity: 0.85; }
.edu-logo-placeholder {
  width: 56px; height: 28px; border-radius: 4px;
  background: var(--navy-mid); border: 1px solid var(--navy-border);
  display: flex; align-items: center; justify-content: center;
}
.edu-logo-placeholder span { font-family: var(--mono); font-size: 8px; color: var(--text-muted); }
.edu-school { font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 2px; }
.edu-degree { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.edu-period { font-family: var(--mono); font-size: 11px; color: var(--blue-light); }

/* ─── Certifications ─────────────────────────────────────────── */
.certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.cert-card {
  background: var(--navy-card); border: 1px solid var(--navy-border);
  border-radius: var(--radius); padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; transition: all var(--transition);
  cursor: pointer; text-decoration: none;
}
.cert-card:hover { border-color: var(--blue); background: rgba(30,111,217,0.06); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.cert-badge { width: 72px; height: 72px; border-radius: 10px; object-fit: contain; }
.cert-badge-placeholder {
  width: 72px; height: 72px; border-radius: 10px;
  background: var(--navy-mid); border: 1px solid var(--navy-border);
  display: flex; align-items: center; justify-content: center;
}
.cert-badge-placeholder svg { width: 28px; height: 28px; color: var(--text-muted); }
.cert-name { font-size: 11.5px; font-weight: 500; color: var(--text-dim); line-height: 1.4; }
.cert-issuer { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; }
.cert-verify { font-family: var(--mono); font-size: 10px; color: var(--blue-light); display: flex; align-items: center; gap: 4px; }
.cert-verify svg { width: 10px; height: 10px; }

/* ─── Skills ─────────────────────────────────────────────────── */
.skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag {
  font-family: var(--mono); font-size: 11px; color: var(--blue-pale);
  background: rgba(30,111,217,0.1); border: 1px solid rgba(61,155,255,0.2);
  padding: 4px 12px; border-radius: 20px; letter-spacing: 0.03em;
}

/* ─── Footer ─────────────────────────────────────────────────── */
footer {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--navy-border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-name { font-family: var(--serif); font-size: 18px; color: var(--text-muted); }
.footer-note { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr; padding: 24px; margin-top: 12px; }
  .hero-text { order: 2; }
  .headshot-wrap { order: 1; }
  nav { gap: 4px; }
  nav a { padding: 4px 9px; font-size: 10px; }
  .certs-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .edu-card { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
  section { padding: 24px 18px; }
}

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
section { animation: fadeUp 0.5s ease both; }
section:nth-of-type(2) { animation-delay: 0.05s; }
section:nth-of-type(3) { animation-delay: 0.10s; }
section:nth-of-type(4) { animation-delay: 0.15s; }
section:nth-of-type(5) { animation-delay: 0.20s; }