*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#050810;color:#e8ecf5;font-family:'Manrope',Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth}
a{color:#e8ecf5;text-decoration:none}
a:hover{color:#9db7ff}
.ac{color:#8fa3d6}
@keyframes reveal{from{opacity:0;filter:blur(10px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}

.page{position:relative;min-height:100vh;background:#050810;overflow:hidden}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,5vw,64px);font-size:13px;letter-spacing:0.02em;animation:reveal 1s ease 1.6s both}
.nav-name,.nav-name:hover{font-weight:500;color:#e8ecf5}
.nav-links{display:flex;gap:clamp(16px,2.6vw,32px);align-items:center;color:#aab4cc}
.nav-links a.nav-resume,.nav-links a.nav-resume:hover{color:#e8ecf5;border-bottom:1px solid rgba(232,236,245,0.4);padding-bottom:2px}
.nav-links a.nav-resume:hover{border-color:#9db7ff}
.nav-toggle{display:none;font:inherit;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#e8ecf5;background:none;border:0;border-bottom:1px solid rgba(232,236,245,0.4);padding:0 0 2px;cursor:pointer}

/* Hero */
.hero{position:relative;z-index:2;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(100px,14vh,140px) clamp(20px,5vw,64px) 44px}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 22% 28%,rgba(5,8,16,0.7),rgba(5,8,16,0) 70%),linear-gradient(180deg,rgba(5,8,16,0) 70%,rgba(5,8,16,0.6) 100%)}
.hero-head{max-width:960px;animation:reveal 1.4s cubic-bezier(.2,.7,.2,1) 1.2s both;text-shadow:0 2px 30px rgba(5,8,16,0.9),0 0 2px rgba(5,8,16,0.8)}
.hero h1{margin:0;font-weight:300;font-size:clamp(38px,5.6vw,80px);line-height:1.02;letter-spacing:-0.025em;text-wrap:balance}
.hero-sub{margin:22px 0 0;font-size:clamp(16px,1.5vw,20px);line-height:1.5;font-weight:300;color:#c3cde6;max-width:720px;text-shadow:0 1px 14px rgba(5,8,16,0.9)}
.hero-info{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px 48px;border-top:1px solid rgba(232,236,245,0.14);padding-top:26px;animation:reveal 1.4s cubic-bezier(.2,.7,.2,1) 1.7s both;text-shadow:0 1px 14px rgba(5,8,16,0.9)}
.info-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#8fa3d6;margin-bottom:10px}
.info-value{font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:#e8ecf5;font-weight:300}
.info-focus{max-width:520px;text-wrap:pretty}
.coords{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.08em;color:#aab4cc}

/* Sections */
.main{position:relative;z-index:2;background:linear-gradient(180deg,rgba(5,8,16,0.3) 0%,rgba(5,8,16,0.42) 200px)}
.section{padding:80px clamp(20px,5vw,64px);max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.4fr);gap:clamp(24px,5vw,80px)}
.section-about{padding-top:140px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#8fa3d6}

/* About */
.about-lead{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.4;font-weight:300;letter-spacing:-0.01em;text-wrap:pretty}
.about-body{margin:28px 0 0;font-size:16px;line-height:1.7;color:#aab4cc;font-weight:300;max-width:620px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.chip{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;padding:6px 12px;border:1px solid rgba(143,163,214,0.3);border-radius:999px;color:#c3cde6}

/* Experience ledger */
.ledger{display:flex;flex-direction:column;border-top:1px solid rgba(232,236,245,0.12)}
.row{cursor:pointer;border-bottom:1px solid rgba(232,236,245,0.12);padding:18px 0;outline:none}
.row:hover,.row:focus-visible{background:rgba(157,183,255,0.04)}
.row-head{display:grid;grid-template-columns:52px minmax(0,1fr) auto 16px;gap:18px;align-items:baseline}
.row-year{font-family:'JetBrains Mono',monospace;font-size:12px;color:#8fa3d6}
.row-role{font-size:17px;font-weight:400}
.row-org{font-size:13px;color:#aab4cc}
.row-glyph{font-family:'JetBrains Mono',monospace;font-size:12px;color:#6f7d9f;text-align:right}
.row-text{display:none;margin:12px 0 4px 70px;font-size:14.5px;line-height:1.65;color:#aab4cc;font-weight:300;max-width:580px;text-wrap:pretty}
.row.open .row-text{display:block}

/* Work cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid rgba(232,236,245,0.12);border-radius:14px;background:rgba(12,18,34,0.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e8ecf5;transition:border-color .3s,transform .3s}
a.card:hover{border-color:rgba(157,183,255,0.5);transform:translateY(-2px);color:#e8ecf5}
.card-kind{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#8fa3d6}
.card-title{font-size:20px;font-weight:400;line-height:1.25;letter-spacing:-0.01em;text-wrap:pretty}
.card-text{margin:0;font-size:14px;line-height:1.65;color:#aab4cc;font-weight:300;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 9px;border:1px solid rgba(143,163,214,0.3);border-radius:999px;color:#c3cde6}

/* Contact */
.contact{padding:120px clamp(20px,5vw,64px) 60px;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.contact h2{margin:22px 0 0;font-weight:200;font-size:clamp(34px,4.8vw,60px);line-height:1.05;letter-spacing:-0.02em;text-shadow:0 2px 30px rgba(5,8,16,0.9);text-wrap:balance}
.contact-text{margin:18px 0 0;font-size:16px;color:#aab4cc;font-weight:300;text-shadow:0 1px 14px rgba(5,8,16,0.9)}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;margin-top:34px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;text-shadow:0 1px 14px rgba(5,8,16,0.9)}
.contact-links a{border-bottom:1px solid rgba(232,236,245,0.35);padding-bottom:4px}
.contact-links a:hover{border-color:#9db7ff}

/* Footer */
.footer{padding:24px clamp(20px,5vw,64px) 12vh;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#6f7d9f}

/* Below 760px: README asks for single-column sections; mobile nav was not designed, so links fold into a Menu toggle. Desktop is untouched. */
@media (max-width:760px){
  .section{grid-template-columns:minmax(0,1fr);gap:24px}
  .section-about{padding-top:100px}
  .hero-info{grid-template-columns:minmax(0,1fr);gap:24px}
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);flex-direction:column;align-items:flex-start;gap:16px;padding:20px 22px;font-size:15px;background:rgba(8,12,24,0.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(232,236,245,0.12);border-radius:14px}
  .nav.menu-open .nav-links{display:flex}
}
@media (max-width:560px){
  .row-head{grid-template-columns:44px minmax(0,1fr) 16px;gap:4px 14px}
  .row-org{grid-column:2;grid-row:2}
  .row-glyph{grid-column:3;grid-row:1}
  .row-text{margin-left:58px}
}