/* ===== Tokens ===== */
:root{
  --navy-950:#070f22;
  --navy-900:#0b1c3a;
  --navy-800:#122748;
  --navy-700:#1a3358;
  --gold-500:#c9a227;
  --gold-300:#e6c866;
  --ivory-100:#f4f0e4;
  --slate-400:#93a1b8;
  --slate-500:#7284a0;
  --teal-500:#3a7a6c;
  --line:rgba(244,240,228,0.10);

  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --container:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy-950);
  color:var(--ivory-100);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-0.01em;}
em{font-style:italic;color:var(--gold-300);}
p{margin:0 0 1em;color:var(--slate-400);}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,0.2);}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;
  padding:16px 6vw;
  background:rgba(7,15,34,0.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0;}
.nav__avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top center;
  border:1px solid var(--gold-500);flex-shrink:0;
}
.nav__name{
  font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav__links{display:flex;gap:32px;font-size:0.88rem;color:var(--slate-400);justify-self:center;}
.nav__links a:hover{color:var(--ivory-100);}

.nav__talk-wrap{position:relative;justify-self:end;}
.nav__talk{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.03em;
  background:var(--gold-500);color:var(--navy-950);border:none;cursor:pointer;
  padding:11px 18px;border-radius:2px;transition:background .2s ease;
}
.nav__talk:hover{background:var(--gold-300);}
.nav__talk svg{transform:rotate(45deg);transition:transform .2s ease;}
.nav__talk-wrap.open .nav__talk svg{transform:rotate(135deg);}
.nav__talk-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:180px;
  background:var(--navy-800);border:1px solid var(--line);border-radius:6px;
  padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav__talk-wrap.open .nav__talk-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav__talk-menu a{
  font-family:var(--mono);font-size:0.82rem;color:var(--ivory-100);padding:10px 12px;border-radius:4px;
  display:flex;align-items:center;gap:10px;
}
.nav__talk-menu a:hover{background:var(--navy-700);color:var(--gold-300);}
.talk-icon{color:var(--gold-500);flex-shrink:0;}
.nav__talk-menu a:hover .talk-icon{color:var(--gold-300);}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;justify-self:end;}
.nav__burger span{width:22px;height:2px;background:var(--ivory-100);display:block;}

.mobile-menu{
  display:none;flex-direction:column;position:fixed;top:0;right:0;height:100vh;width:72vw;max-width:320px;
  background:var(--navy-900);border-left:1px solid var(--line);padding:90px 30px 30px;gap:22px;
  transform:translateX(100%);transition:transform 0.35s ease;z-index:49;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{font-family:var(--mono);font-size:0.95rem;color:var(--ivory-100);}
.mobile-menu__contact{display:flex;align-items:center;gap:10px;}
.mobile-menu__contact .talk-icon{color:var(--gold-500);flex-shrink:0;}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;
  padding:96px 6vw 60px;
  min-height:90vh;display:flex;flex-direction:column;justify-content:center;
}
.hero__waveform{width:100%;max-width:900px;margin:36px auto 0;opacity:0.4;pointer-events:none;}
.hero__waveform svg{width:100%;height:70px;display:block;}
#pulsePath{
  fill:none;stroke:var(--gold-500);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(201,162,39,0.35));
  stroke-dasharray:2000; stroke-dashoffset:2000;
  animation:draw 2.6s ease-out forwards 0.3s;
}
@keyframes draw{to{stroke-dashoffset:0;}}

.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.3fr 0.8fr;gap:60px;align-items:center;
  max-width:var(--container);margin:0 auto;width:100%;
}
.hero__name{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.03;margin-bottom:18px;}
.hero__tagline{
  font-family:var(--mono);font-size:1rem;letter-spacing:0.03em;color:var(--gold-300);margin-bottom:20px;
}
.hero__sub{max-width:520px;font-size:1.02rem;}
.hero__actions{display:flex;gap:14px;margin:28px 0 26px;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);font-size:0.85rem;letter-spacing:0.03em;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;transition:all .2s ease;
}
.btn--primary{background:var(--gold-500);color:var(--navy-950);}
.btn--primary:hover{background:var(--gold-300);}
.btn--ghost{border-color:var(--line);color:var(--ivory-100);}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--gold-300);}
.hero__socials{display:flex;gap:22px;font-family:var(--mono);font-size:0.82rem;color:var(--slate-400);}
.hero__socials a:hover{color:var(--gold-300);}

.hero__portrait{justify-self:center;text-align:center;}
.portrait__frame{
  width:260px;height:320px;border:1px solid var(--gold-500);border-radius:4px;padding:10px;position:relative;
}
.portrait__frame::before{
  content:'';position:absolute;inset:-10px;border:1px solid var(--line);border-radius:4px;z-index:-1;
}
.portrait__frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:2px;
  filter:grayscale(0.55) sepia(0.25) saturate(1.3) hue-rotate(-15deg) contrast(1.05) brightness(0.92);
}
.portrait__caption{font-family:var(--mono);font-size:0.72rem;color:var(--slate-500);margin-top:14px;letter-spacing:0.02em;}

.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.15em;color:var(--slate-500);text-transform:uppercase;
}
.scroll-cue::after{content:'';display:block;width:1px;height:26px;background:var(--slate-500);margin:8px auto 0;animation:pulse-y 1.8s ease-in-out infinite;}
@keyframes pulse-y{0%,100%{opacity:0.2;}50%{opacity:1;}}

/* ===== Divider ===== */
.pulse-divider{padding:0 0;}
.pulse-divider svg{width:100%;height:40px;display:block;}
.pulse-divider path{fill:none;stroke:var(--line);stroke-width:1;}

/* ===== Sections ===== */
.section{padding:100px 6vw;}
.section--alt{background:var(--navy-900);}
.section__inner{max-width:var(--container);margin:0 auto;}
.section h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:10px;max-width:640px;}
.section__lede{max-width:520px;margin-bottom:56px;}

/* About */
.about{display:grid;grid-template-columns:0.7fr 1.3fr;gap:60px;}
.about__label h2{font-size:clamp(1.9rem,3vw,2.4rem);}
.about__body p{font-size:1.02rem;color:var(--ivory-100);opacity:0.85;}
.about__body strong{color:var(--gold-300);font-weight:600;}
.about__meta{display:flex;gap:36px;margin-top:32px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;}
.about__meta div{display:flex;flex-direction:column;gap:6px;}
.about__meta span{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--slate-500);}
.about__meta strong{font-weight:500;font-size:0.92rem;}

/* Timeline */
.timeline{border-top:1px solid var(--line);}
.tl-item{
  display:grid;grid-template-columns:200px 1fr;gap:40px;
  padding:36px 0;border-bottom:1px solid var(--line);
}
.tl-item__when{display:flex;flex-direction:column;gap:6px;}
.tl-range{font-family:var(--mono);font-size:0.85rem;color:var(--gold-300);}
.tl-loc{font-family:var(--mono);font-size:0.72rem;color:var(--slate-500);}
.tl-item__body h3{font-size:1.2rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tl-role{font-family:var(--mono);font-size:0.82rem;color:var(--slate-400);margin:6px 0 12px;}
.tl-item__body p{max-width:600px;color:var(--slate-400);}
.tl-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.tl-chips span{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.03em;color:var(--slate-400);
  border:1px solid var(--line);padding:5px 10px;border-radius:2px;
}
.tag{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--slate-400);
}
.tag--current{border-color:var(--gold-500);color:var(--gold-300);}
.tag--live{border-color:var(--teal-500);color:#7fc2af;}

/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.skill-card{
  background:var(--navy-800);border:1px solid var(--line);border-radius:6px;padding:30px 26px;
}
.skill-card h3{font-size:1.05rem;color:var(--gold-300);margin-bottom:18px;}
.skill-card ul{margin:0;padding:0;list-style:none;}
.skill-card li{
  padding:9px 0;border-bottom:1px dashed var(--line);color:var(--ivory-100);opacity:0.85;font-size:0.92rem;
}
.skill-card li:last-child{border-bottom:none;}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.project-card{
  background:var(--navy-800);border:1px solid var(--line);border-radius:6px;padding:30px;
  transition:border-color .2s ease, transform .2s ease;
}
.project-card:hover{border-color:var(--gold-500);transform:translateY(-3px);}
.project-card__top{display:flex;justify-content:space-between;margin-bottom:16px;}
.project-card h3{font-size:1.3rem;margin-bottom:10px;}
.project-card p{font-size:0.92rem;}
.project-link{
  display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.82rem;color:var(--gold-300);
  border-bottom:1px solid transparent;
}
.project-link:hover{border-color:var(--gold-300);}

/* Contact */
.contact{text-align:left;}
.contact h2{max-width:none;}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;}
.contact-card{
  border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .2s ease, background .2s ease;
}
.contact-card:hover{border-color:var(--gold-500);background:var(--navy-800);}
.contact-card__label{font-family:var(--mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--slate-500);}
.contact-card__value{font-size:0.98rem;color:var(--ivory-100);}

/* Footer */
.footer{
  padding:44px 6vw 34px;border-top:1px solid var(--line);text-align:center;
  font-family:var(--mono);font-size:0.75rem;color:var(--slate-500);
}
.footer p{margin:4px 0;color:var(--slate-500);}
.footer__base{color:var(--slate-500);}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===== Responsive ===== */
@media (max-width:920px){
  .nav{grid-template-columns:1fr auto;}
  .nav__links{display:none;}
  .nav__talk-wrap{display:none;}
  .nav__burger{display:flex;}
  .mobile-menu{display:flex;}
  .hero__inner{grid-template-columns:1fr;text-align:left;}
  .hero__portrait{justify-self:start;margin-top:10px;}
  .about{grid-template-columns:1fr;}
  .tl-item{grid-template-columns:1fr;gap:10px;}
  .skills-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .contact-grid{grid-template-columns:1fr;}
  .portrait__frame{width:100%;max-width:260px;}
}

@media (max-width:420px){
  .nav{padding:16px 5vw;}
  .nav__mark{font-size:0.95rem;}
  .hero{padding:64px 5vw 48px;min-height:auto;}
  .section{padding:64px 5vw;}
  .section__lede{margin-bottom:36px;}
  .hero__name{font-size:clamp(2.1rem,10vw,2.8rem);}
  .hero__actions{flex-direction:column;align-items:stretch;}
  .hero__actions .btn{text-align:center;}
  .hero__socials{flex-wrap:wrap;gap:14px;}
  .tl-item{padding:26px 0;}
  .skill-card,.project-card,.contact-card{padding:22px;}
  .contact-grid{gap:12px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  #pulsePath{animation:none;stroke-dashoffset:0;}
  .scroll-cue::after{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}