@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

/* ── VARIABLES ── */
:root {
  --bg:#010a12; --surf:#051018; --surf2:#0a1e2e;
  --bdr:#0f2d44; --bdr2:#1a4a6a;
  --cyan:#00e5ff; --cyan2:#00b8cc; --cyan3:#006a8a;
  --blue:#0055bb; --teal:#00ccaa; --hot:#ff6a00;
  --green:#00e676; --orange:#ff9100; --red:#ff5252;
  --txt:#ffffff; --txt2:#8ec8e0; --txt3:#3a6880;
  --mono:'Share Tech Mono',monospace;
  --sans:'Barlow',sans-serif;
  --cond:'Barlow Condensed',sans-serif;
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.65;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ── BLUEPRINT BACKGROUND ── */
/* Fine dot grid */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,180,220,.2) 1px,transparent 1px);
  background-size:28px 28px;
}
/* Major grid lines */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,180,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,220,.045) 1px,transparent 1px);
  background-size:140px 140px;
}

/* ── SCROLLBAR — CFD gradient ── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--blue),var(--cyan),var(--hot));}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:62px;background:rgba(1,10,18,.97);backdrop-filter:blur(16px);
  border-bottom:2px solid var(--bdr2);
  box-shadow:0 2px 0 rgba(0,229,255,.04);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;
}
/* RI logo with corner brackets */
.nav-logo{
  font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--cyan);
  letter-spacing:.1em;flex-shrink:0;position:relative;padding:4px 10px;
}
.nav-logo::before,.nav-logo::after{
  content:'';position:absolute;width:7px;height:7px;
  border-color:var(--cyan3);border-style:solid;
}
.nav-logo::before{top:0;left:0;border-width:1px 0 0 1px;}
.nav-logo::after{bottom:0;right:0;border-width:0 1px 1px 0;}

.nav-links{display:flex;gap:1.5rem;list-style:none;}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;color:var(--txt2);
  letter-spacing:.1em;text-transform:uppercase;transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:1px;background:var(--cyan);transform:scaleX(0);transition:transform .2s;
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a:hover,.nav-links a.active{color:var(--cyan);}
.nav-cta{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem 1.1rem;border:1px solid var(--cyan);color:var(--cyan);
  background:transparent;transition:all .2s;cursor:pointer;text-decoration:none;flex-shrink:0;
}
.nav-cta:hover{background:var(--cyan);color:var(--bg);}

/* Hamburger */
.nav-hb{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;z-index:300;}
.nav-hb span{display:block;width:24px;height:2px;background:var(--cyan);transition:all .3s;}
.nav-hb.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hb.open span:nth-child(2){opacity:0;}
.nav-hb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.nav-drawer{
  display:none;position:fixed;top:62px;left:0;right:0;bottom:0;
  background:rgba(1,10,18,.99);backdrop-filter:blur(20px);z-index:199;
  flex-direction:column;padding:2rem 1.5rem;border-top:1px solid var(--bdr2);overflow-y:auto;
}
.nav-drawer.open{display:flex;}
.nav-drawer ul{list-style:none;display:flex;flex-direction:column;margin-bottom:2rem;}
.nav-drawer ul li a{
  display:block;font-family:var(--mono);font-size:1.1rem;color:var(--txt2);
  letter-spacing:.1em;text-transform:uppercase;padding:1rem 0;
  border-bottom:1px solid var(--bdr);transition:color .2s,padding-left .2s;
}
.nav-drawer ul li a:hover,.nav-drawer ul li a.active{color:var(--cyan);padding-left:.5rem;}
.nav-drawer .dcv{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1rem 1.5rem;border:1px solid var(--cyan);color:var(--cyan);
  background:transparent;text-align:center;text-decoration:none;transition:all .2s;margin-top:.5rem;
}
.nav-drawer .dcv:hover{background:var(--cyan);color:var(--bg);}

.page{padding-top:62px;}

/* ── SECTION HEADER — engineering callout ── */
.section{position:relative;z-index:1;padding:5rem 2rem;max-width:1180px;margin:0 auto;}
.section-hdr{display:flex;align-items:center;gap:1rem;margin-bottom:3rem;}
/* Arrow-shaped section number badge */
.sec-num{
  font-family:var(--mono);font-size:.65rem;color:var(--bg);background:var(--cyan);
  letter-spacing:.1em;padding:.25rem 1rem .25rem .5rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
  font-weight:700;
}
.sec-title{
  font-family:var(--cond);font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.sec-line{
  flex:1;height:1px;
  background:linear-gradient(to right,var(--bdr2),transparent);
  position:relative;
}
.sec-line::before{
  content:'';position:absolute;left:0;top:-3px;
  width:6px;height:6px;border:1px solid var(--bdr2);
  transform:rotate(45deg);background:var(--bg);
}
.divider{
  height:1px;max-width:1180px;margin:0 auto;
  background:linear-gradient(to right,transparent,var(--bdr2),transparent);
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.72rem 1.5rem;border:1px solid;
  transition:all .25s;cursor:pointer;
}
.btn-p{background:var(--cyan);border-color:var(--cyan);color:var(--bg);font-weight:700;}
.btn-p:hover{background:transparent;color:var(--cyan);}
.btn-o{background:transparent;border-color:var(--bdr2);color:var(--txt2);}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan);}

/* ── TAGS ── */
.tag{font-family:var(--mono);font-size:.62rem;padding:.2rem .6rem;border:1px solid var(--bdr2);color:var(--txt3);letter-spacing:.05em;text-transform:uppercase;}
.tac{border-color:var(--cyan3);color:var(--cyan2);}

/* ── TIMELINE — CFD gradient vertical line ── */
.timeline{padding-left:2rem;position:relative;}
.timeline::before{
  content:'';position:absolute;left:0;top:10px;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--blue),var(--cyan),transparent);
}
.tl-item{position:relative;margin-bottom:2.75rem;padding-left:1.5rem;}
.tl-item::before{
  content:'';position:absolute;left:-2rem;top:10px;
  width:9px;height:9px;border:1px solid var(--cyan);
  background:var(--bg);transform:rotate(45deg);
}
.tl-meta{font-family:var(--mono);font-size:.68rem;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem;}
.tl-role{font-family:var(--cond);font-size:1.3rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;}
.tl-co{font-size:.87rem;color:var(--cyan2);font-weight:600;margin-bottom:.65rem;}
.tl-desc{color:var(--txt2);font-size:.9rem;line-height:1.75;margin-bottom:.75rem;}

/* ── EDU CARD — CFD gradient left stripe ── */
.edu-card{
  background:var(--surf);border:1px solid var(--bdr);padding:1.75rem;
  position:relative;transition:border-color .25s,box-shadow .25s;overflow:hidden;
}
.edu-card:hover{border-color:var(--cyan2);box-shadow:0 0 24px rgba(0,229,255,.06);}
.edu-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(to bottom,var(--blue),var(--cyan),var(--teal));
}
.edu-card::after{
  content:'';position:absolute;top:8px;right:8px;
  width:12px;height:12px;border-top:1px solid var(--bdr2);border-right:1px solid var(--bdr2);
}
.edu-period{font-family:var(--mono);font-size:.66rem;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.45rem;}
.edu-deg{font-family:var(--cond);font-size:1.18rem;font-weight:800;text-transform:uppercase;margin-bottom:.25rem;}
.edu-inst{font-size:.87rem;color:var(--cyan2);font-weight:600;margin-bottom:.65rem;}
.edu-det{font-size:.84rem;color:var(--txt2);line-height:1.7;}

/* ── PUB ITEM — animated CFD bar on hover ── */
.pub-item{
  background:var(--surf);border:1px solid var(--bdr);padding:1.5rem;
  display:grid;grid-template-columns:50px 1fr;gap:1.25rem;
  position:relative;overflow:hidden;transition:border-color .25s;
}
.pub-item::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--blue),var(--cyan),var(--teal),var(--hot));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.pub-item:hover{border-color:var(--cyan2);}
.pub-item:hover::after{transform:scaleX(1);}
.pub-idx{font-family:var(--cond);font-size:2.2rem;font-weight:900;color:var(--bdr2);line-height:1;}
.pub-type{font-family:var(--mono);font-size:.65rem;color:var(--orange);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem;}
.pub-title{font-size:.95rem;font-weight:700;margin-bottom:.35rem;line-height:1.4;}
.pub-venue{font-size:.82rem;color:var(--cyan2);margin-bottom:.3rem;}
.pub-authors{font-size:.78rem;color:var(--txt3);font-style:italic;}

/* ── PROJECT CARD — CFD pressure bar sweeps on hover ── */
.proj-card{
  background:var(--surf);border:1px solid var(--bdr);padding:1.75rem;
  position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.proj-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--blue),var(--cyan),var(--teal),var(--hot));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.proj-card:hover{border-color:var(--cyan2);box-shadow:0 0 28px rgba(0,229,255,.07);}
.proj-card:hover::after{transform:scaleX(1);}
.proj-type{font-family:var(--mono);font-size:.65rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.65rem;}
.proj-title{font-family:var(--cond);font-size:1.15rem;font-weight:800;text-transform:uppercase;margin-bottom:.65rem;line-height:1.2;}
.proj-desc{font-size:.86rem;color:var(--txt2);line-height:1.75;margin-bottom:1rem;}
.proj-out{
  font-family:var(--mono);font-size:.72rem;color:var(--green);
  padding:.4rem .75rem;border:1px solid rgba(0,230,118,.2);
  background:rgba(0,230,118,.04);margin-bottom:1rem;
}

/* ── SKILL GROUP — corner bracket decoration ── */
.skill-grp{
  background:var(--surf);border:1px solid var(--bdr);padding:1.5rem;
  position:relative;transition:border-color .25s;
}
.skill-grp:hover{border-color:var(--cyan3);}
.skill-grp::before{
  content:'';position:absolute;top:7px;left:7px;
  width:10px;height:10px;border-top:1px solid var(--bdr2);border-left:1px solid var(--bdr2);
}
.skill-grp::after{
  content:'';position:absolute;bottom:7px;right:7px;
  width:10px;height:10px;border-bottom:1px solid var(--bdr2);border-right:1px solid var(--bdr2);
}
.skill-grp-title{
  font-family:var(--mono);font-size:.7rem;color:var(--cyan);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bdr);
}
.skill-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
.skill-list li{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--txt2);}
.skill-list li::before{content:'▸';color:var(--cyan);font-size:.7rem;}
.skill-bar-w{flex:1;height:3px;background:var(--bdr);margin-left:auto;max-width:70px;}
.skill-bar{
  height:100%;background:linear-gradient(to right,var(--blue),var(--cyan));
  position:relative;
}
.skill-bar::after{content:'';position:absolute;right:0;top:-2px;width:1px;height:7px;background:var(--cyan);}

/* ── HONOUR ITEM ── */
.honour-item{
  display:flex;gap:1rem;align-items:start;padding:1rem 1.25rem;
  background:var(--surf);border:1px solid var(--bdr);transition:border-color .25s;
}
.honour-item:hover{border-color:var(--cyan3);}
.honour-icon{color:var(--orange);font-size:1rem;min-width:20px;}
.honour-text{font-size:.87rem;color:var(--txt2);}
.honour-text strong{color:var(--txt);}

/* ── CONTACT LINK ── */
.contact-link{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;
  background:var(--surf);border:1px solid var(--bdr);color:var(--txt);
  transition:all .2s;position:relative;overflow:hidden;
}
.contact-link::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--blue),var(--cyan));
  transform:scaleY(0);transform-origin:top;transition:transform .25s;
}
.contact-link:hover{border-color:var(--cyan);}
.contact-link:hover::before{transform:scaleY(1);}
.cl-icon{font-family:var(--mono);font-size:.72rem;color:var(--cyan);min-width:70px;letter-spacing:.05em;text-transform:uppercase;}
.cl-val{font-size:.875rem;color:var(--txt2);}
.contact-link:hover .cl-val{color:var(--cyan);}

/* ── DETAIL ROW ── */
.det-row{display:flex;gap:1rem;align-items:baseline;padding-bottom:.75rem;border-bottom:1px solid var(--bdr);}
.det-key{font-family:var(--mono);font-size:.68rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;min-width:110px;}
.det-val{font-size:.9rem;color:var(--txt2);}
.det-val a{color:var(--cyan2);}
.det-val a:hover{color:var(--cyan);}

/* ── PHOTO FRAME ── */
.photo-frame{
  width:200px;height:200px;border:2px solid var(--cyan);
  position:relative;overflow:hidden;flex-shrink:0;
}
.photo-frame::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(0,229,255,.06) 1px,transparent 1px),
             linear-gradient(90deg,rgba(0,229,255,.06) 1px,transparent 1px);
  background-size:20px 20px;
}
.photo-frame img{width:100%;height:100%;object-fit:cover;}
.photo-ph{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--surf2);color:var(--txt3);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-align:center;gap:.5rem;
}
.photo-ph svg{opacity:.4;}

/* ── STAT BOX ── */
.stat-box{
  border:1px solid var(--bdr);padding:.75rem 1rem;min-width:100px;
  background:var(--surf);position:relative;
}
.stat-box::after{
  content:'';position:absolute;top:4px;right:4px;
  width:6px;height:6px;border-top:1px solid var(--bdr2);border-right:1px solid var(--bdr2);
}
.stat-num{font-family:var(--cond);font-size:2.6rem;font-weight:900;color:var(--cyan);line-height:1;}
.stat-lbl{font-family:var(--mono);font-size:.62rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem;}

/* ── FORM ── */
.form-grp{display:flex;flex-direction:column;gap:.4rem;}
.form-grp label{font-family:var(--mono);font-size:.66rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;}
.form-grp input,.form-grp textarea{
  background:var(--surf);border:1px solid var(--bdr2);color:var(--txt);
  padding:.72rem 1rem;font-family:var(--sans);font-size:.875rem;outline:none;
  transition:border-color .2s;width:100%;
}
.form-grp input:focus,.form-grp textarea:focus{border-color:var(--cyan2);}
.form-grp textarea{resize:vertical;min-height:110px;}

/* ── ANIMATIONS ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor::after{content:'_';color:var(--cyan);animation:blink 1s step-end infinite;}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp .6s ease both;}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
.d4{animation-delay:.4s}.d5{animation-delay:.5s}

/* GEAR ROTATION — uses JS-set CSS variable for cross-browser compat */
@keyframes spin-cw {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-ccw{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.gear-cw {animation:spin-cw  16s linear infinite;}
.gear-ccw{animation:spin-ccw 11s linear infinite;}
.gear-slow{animation:spin-cw 24s linear infinite;}

@keyframes flow{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.ga{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}
.gas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.fc{display:flex;flex-direction:column;gap:1rem;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .nav-hb{display:flex;}
  .g2,.g3{grid-template-columns:1fr;}
  .ga{grid-template-columns:1fr;}
  .hero-svg-wrap{
    position:absolute!important;
    right:50%!important;
    top:50%!important;
    transform:translate(50%,-50%)!important;
    opacity:.07!important;
    width:340px!important;
    height:340px!important;
    pointer-events:none;
  }
  .stats-col{flex-direction:row!important;flex-wrap:wrap;gap:1.25rem!important;padding-left:0!important;justify-content:flex-start;margin-top:1.5rem;}
}
@media(max-width:600px){
  .section{padding:3rem 1.25rem;}
  .nav{padding:0 1.25rem;}
  .sec-title{font-size:1.6rem;}
  .hero-wrap{padding:5rem 1.25rem 3rem!important;}
  .hero-name{font-size:clamp(2.8rem,15vw,4.5rem)!important;}
  .hero-sub{font-size:1rem!important;}
  .hero-btns{flex-direction:column!important;gap:.75rem!important;}
  .hero-btns .btn{justify-content:center;}
  .stats-col{display:grid!important;grid-template-columns:1fr 1fr;gap:.85rem!important;margin-top:1.5rem;padding:0!important;}
  .stat-num{font-size:2rem;}
  .timeline{padding-left:1.5rem;}
  .proj-card,.edu-card,.pub-item{padding:1.25rem;}
  .pub-item{grid-template-columns:36px 1fr;gap:.75rem;}
  .gas{grid-template-columns:1fr;}
  .det-row{flex-direction:column;gap:.15rem;}
  .det-key{min-width:auto;}
  .photo-frame{width:140px!important;height:140px!important;}
  .btn{font-size:.7rem;padding:.65rem 1.1rem;}
}