:root{
  --bg:#0D0D0D; --bg-2:#283740; --fg:#e5ecf3; --muted:#BACDD9;
  --brand:#028be0; --brand-2:#7B9AA6; --ring:#283740;
}
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior:smooth; } /* smooth anchor scroll */
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color:var(--fg);
}
a{color:inherit;text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:24px}

/* Header */
/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(11,13,16,.95), rgba(11,13,16,.6));
  border-bottom: 1px solid var(--ring);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left logo, center icon, right links */
  align-items: center;
  gap: 200px;
}

/* Left wordmark (PNG) */
.logotype img {
  height: 48px;
  width: auto;
  display: block;
}

/* Center icon (scroll-to-top) */
.logo-link {
  justify-self: center;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Right nav links — aligned more left */
.links {
  justify-self: start;   /* <-- this pulls nav away from the far right edge */
}
.links a {
  opacity: .85;
  margin-left: 18px;
  font-weight: 400;
  letter-spacing: 4px;
}
.links a:hover {
  opacity: 1;
  color: var(--brand);
}

/* Optional title styles (if you use them elsewhere) */
.title { font-size: 1.8rem; letter-spacing: .4px; }
.title-bold { font-weight: 600; letter-spacing: 6px; }
.title-light { font-weight: 300; color: var(--muted); letter-spacing: 12px; }


/* Hero */
.hero{padding:60px 0 14px}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.06;margin:0 0 10px;font-weight:700}
.hero p{max-width:720px;color:var(--muted);margin:8px 0 0;font-weight:400}

/* WebGL */
#webgl-wrap{
  position:relative; width:100%;
  height:min(64vh,560px);
  border-radius:18px; overflow:hidden; contain:paint;
  border:1px solid var(--ring);
  background:#0d1014; /* opaque to avoid seams */
}
#webgl{ display:block; width:100%; height:100%; }
#bgfx{ z-index:-1 !important; } /* particles below everything */
body > * { position:relative; z-index:1; }
img, canvas { display:block; } /* prevent baseline gaps */

/* Fallback grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid img{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--ring)}

/* Bio + Contact */
section{padding:40px 0}
.card{
  background:linear-gradient(180deg,rgba(16,20,27,.8),rgba(10,12,16,.8));
  border:1px solid var(--ring);border-radius:16px;padding:22px
}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.bio p{color:var(--muted);font-weight:400}
.details{list-style:none;padding:0;margin:0;color:var(--muted);line-height:1.9;font-weight:500}
form label{display:block;font-size:14px;margin:10px 0 6px;color:#cde0f2;font-weight:600}
input,textarea{
  width:100%;padding:12px 14px;background:#0c1016;color:var(--fg);
  border:1px solid var(--ring);border-radius:12px;outline:0;font:inherit
}
textarea{min-height:140px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
  border:1px solid var(--ring);background:linear-gradient(135deg,#0e141c,#0b1017);
  cursor:pointer;color:#dbe9f7;font-weight:700;letter-spacing:.3px
}
.btn:hover{border-color:#274158;box-shadow:0 6px 22px rgba(0,192,245,.12)}

/* Lightbox */
#lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
#lightbox.hidden { display: none; }
.lightbox-content { position: relative; max-width: 92vw; max-height: 90vh; text-align: center; }
#lightbox-img { max-width: 100%; max-height: 75vh; border-radius: 10px; }
#lightbox-caption { margin-top: 10px; font-size: 14px; color: #ccc; font-weight:500 }
#lightbox-close {
  position: absolute; top: -12px; right: -12px;
  background: #111; border: 1px solid #444; border-radius: 999px;
  padding: 6px 8px; cursor: pointer; color: #fff; font-weight:700
}
#lightbox-close:hover { background: #333; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  #bgfx { display:none; }
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 18px 0;
  font-size: 13px;
  font-weight: 400;
  color: #90a4b7;
  border-top: 1px solid var(--ring);
  background: rgba(11,13,16,0.9);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.site-footer a:hover {
  color: var(--brand);
}