/* ================================================================
   DR. SWAPNIL RAHANE — Academic Portfolio
   Elegant Academic theme · Crimson Red palette
   Fraunces (display serif) · Inter (body / UI)
   ================================================================ */
:root{
  --dark:#0A0A0A;
  --dark-2:#101010;
  --panel-d:#141413;
  --light:#F4F1EA;
  --light-2:#ECE8DE;
  --paper:#FBFAF6;
  --ink:#121212;
  --ink-60:rgba(18,18,18,.72);
  --ink-40:rgba(18,18,18,.56);
  --ivory:#F4F1EA;
  --ivory-60:rgba(244,241,234,.74);
  --ivory-40:rgba(244,241,234,.58);
  --line-l:rgba(18,18,18,.16);
  --line-l2:rgba(18,18,18,.08);
  --line-d:rgba(244,241,234,.13);
  --line-d2:rgba(244,241,234,.07);
  --red:#C8102E;        /* primary accent */
  --red-l:#E84860;      /* bright accent (on dark) */
  --gold:#C8A250;       /* warm secondary accent */
  --disp:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
  --cond:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans',system-ui,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--light);color:var(--ink);font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.2s}
ul{list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
::selection{background:var(--red);color:#fff}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{100%{transform:rotate(360deg)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- Icons ---------------- */
.ico{display:inline-block;width:26px;height:26px;flex-shrink:0;color:var(--red)}
.ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- Header (dark) ---------------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:200;background:rgba(10,10,10,.92);border-bottom:1px solid var(--line-d)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.wordmark{font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.2px;text-transform:uppercase;color:var(--ivory)}
.wordmark sup{color:var(--red-l);font-size:11px}
.hd nav{display:flex;gap:2px;align-items:center}
.hd nav a{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ivory-60);padding:8px 12px}
.hd nav a:hover{color:var(--ivory)}
.hd nav a.on{color:var(--ivory);border-bottom:1px solid var(--red)}
.hd .cta{font-family:var(--cond);font-weight:700;background:var(--red);color:#fff;padding:12px 26px;font-size:13px;letter-spacing:1px;margin-left:14px;border-bottom:0!important}
.hd .cta:hover{background:var(--ivory);color:var(--dark)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--ivory);margin:6px 0}

/* ---------------- Kickers w/ pulsing red dot ---------------- */
.hello,.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:3.85px;text-transform:uppercase;color:var(--ink-60)}
.hello::before,.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s ease infinite}
.eyebrow .idx{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:1px;color:var(--red)}
.sec-dark .eyebrow{color:var(--ivory-60)}
.sec-dark .eyebrow .idx{color:var(--gold)}

/* ---------------- Hero (dark) ---------------- */
.hero{position:relative;padding:182px 0 100px;overflow:hidden;background:var(--dark);color:var(--ivory)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;background:
  radial-gradient(60rem 34rem at 86% -10%,rgba(200,16,46,.20),transparent 58%),
  radial-gradient(40rem 26rem at -10% 112%,rgba(200,162,80,.09),transparent 55%),
  repeating-linear-gradient(90deg,rgba(244,241,234,.022) 0 1px,transparent 1px 168px),
  repeating-linear-gradient(0deg,rgba(244,241,234,.018) 0 1px,transparent 1px 168px)}
/* drifting aurora glow — subtle motion keeps the hero alive */
.hero .aura{position:absolute;width:62rem;height:62rem;top:-26rem;right:-18rem;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.22),rgba(200,16,46,.05) 45%,transparent 65%);
  filter:blur(10px);animation:auroraDrift 16s ease-in-out infinite alternate}
.hero .aura.b{width:42rem;height:42rem;top:auto;right:auto;bottom:-22rem;left:-16rem;
  background:radial-gradient(circle,rgba(200,162,80,.12),transparent 60%);animation-duration:20s;animation-direction:alternate-reverse}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1);opacity:.9}100%{transform:translate(-5rem,3.5rem) scale(1.14);opacity:1}}
#helix,#web{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#web{opacity:.8}
.hero-in{position:relative;display:grid;grid-template-columns:1.32fr .68fr;gap:48px;align-items:center;z-index:2}
.hero .hello{color:var(--ivory-60);margin-bottom:30px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(42px,6.4vw,88px);line-height:1.04;letter-spacing:-.022em;color:var(--ivory)}
.hero h1 .ln{display:block}
.hero h1 .ghost{font-weight:800;color:var(--red-l)}
.hero h1 .dotr{color:var(--red-l)}
.roles{display:flex;flex-wrap:wrap;gap:8px 0;margin:32px 0 20px;font-family:var(--cond);font-weight:600;font-size:14.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-60)}
.roles span{display:flex;align-items:center}
.roles span+span::before{content:'✚';color:var(--red);font-size:11px;margin:0 16px}
.hero .quote{max-width:560px;color:var(--ivory-60);font-size:17.5px;margin-bottom:42px}
.hero .quote em{font-style:normal;color:var(--ivory)}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-chips{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.hchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:158px;background:linear-gradient(160deg,var(--panel-d),rgba(200,16,46,.07));border:1px solid var(--line-d);border-top:3px solid var(--red);padding:16px 24px 14px;font-size:11.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ivory-60);transition:.25s}
.hchip:hover{border-color:rgba(200,16,46,.55);border-top-color:var(--red);color:var(--ivory);transform:translateY(-4px);box-shadow:0 18px 44px rgba(200,16,46,.22)}
.hchip b{font-family:var(--disp);color:var(--red-l);font-size:32px;font-weight:400;line-height:1.1;letter-spacing:.5px;text-shadow:0 0 24px rgba(200,16,46,.35)}
.cross-wm{position:absolute;right:-70px;bottom:-90px;font-size:380px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.06);pointer-events:none;z-index:0;font-family:var(--disp)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:26px;height:44px;border:1.5px solid rgba(244,241,234,.35);border-radius:20px;z-index:3}
.scroll-cue span{position:absolute;top:8px;left:50%;width:4px;height:9px;margin-left:-2px;border-radius:4px;background:var(--red);animation:cue 1.8s ease infinite;animation-play-state:paused}
.live .scroll-cue span{animation-play-state:running}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(15px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.8px;text-transform:uppercase;padding:18px 36px;cursor:pointer;border:0;transition:background .2s,color .2s,transform .25s,box-shadow .25s}
.btn-ink{background:var(--red);color:#fff}
.btn-ink:hover{background:var(--ivory);color:var(--dark);transform:translateY(-2px);box-shadow:0 16px 40px rgba(200,16,46,.3)}
.btn-line{border:1px solid var(--line-d);color:var(--ivory);background:transparent}
.btn-line:hover{border-color:var(--ivory);background:var(--ivory);color:var(--dark)}

/* ---------------- Hero photo ---------------- */
.por{position:relative;justify-self:end}
.por .arch{position:relative;width:330px;max-width:74vw;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.por .arch::before{content:'';position:absolute;inset:16px -16px -16px 16px;border-radius:300px 300px 18px 18px;border:1px solid var(--line-d);z-index:0;transform:translateZ(-40px)}
.por .arch::after{content:'';position:absolute;top:-22px;right:-22px;width:96px;height:96px;border-radius:50%;border:1px dashed var(--gold);z-index:0;opacity:.7;animation:spin 60s linear infinite;animation-play-state:paused}
.live .por .arch::after{animation-play-state:running}
.por img{position:relative;border-radius:300px 300px 18px 18px;filter:saturate(.9) contrast(1.06);box-shadow:0 40px 90px rgba(0,0,0,.55);z-index:1;transform:translateZ(28px)}
.spin-badge{position:absolute;z-index:3;left:-58px;bottom:36px;width:126px;height:126px;background:var(--light);border-radius:50%;box-shadow:0 18px 46px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.spin-badge svg{width:110px;height:110px;animation:spin 16s linear infinite;animation-play-state:paused}
.live .spin-badge svg{animation-play-state:running}
.spin-badge text{font-size:8px;font-weight:700;letter-spacing:1px;fill:var(--ink-60);text-transform:uppercase;font-family:var(--body)}
.spin-badge .core{position:absolute;font-size:20px;color:var(--red)}
/* soft red glow halo behind the portrait */
.por-glow{position:absolute;inset:-16% -12% -6% -12%;z-index:0;pointer-events:none;border-radius:46%;
  background:radial-gradient(circle at 55% 42%,rgba(200,16,46,.34),rgba(200,16,46,.06) 46%,transparent 68%);filter:blur(28px)}
/* floating accent card */
.por-card{position:absolute;z-index:4;right:-24px;top:52px;display:flex;flex-direction:column;gap:3px;
  padding:15px 22px 13px;background:rgba(20,20,19,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-d);border-left:3px solid var(--red);box-shadow:0 20px 46px rgba(0,0,0,.5);animation:floatY 4.6s ease-in-out infinite}
.por-card b{font-family:var(--disp);font-weight:500;font-size:30px;line-height:1;color:var(--red-l)}
.por-card span{font-family:var(--cond);font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ivory-60);max-width:100px}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------------- Marquee (RED band) ---------------- */
.mq{background:var(--red);color:#fff;overflow:hidden;padding:15px 0}
.mq-track{display:flex;width:max-content;animation:mq 30s linear infinite;animation-play-state:paused;will-change:transform}
.live .mq-track{animation-play-state:running}
.mq-item{display:flex;align-items:center;font-family:var(--cond);font-weight:700;font-size:14.5px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.mq-item::after{content:'✚';color:rgba(255,255,255,.75);margin:0 32px;font-size:12px}

/* ---------------- Sections: LIGHT default / DARK variant ---------------- */
section{position:relative}
.sec{padding:112px 0;background:var(--light);color:var(--ink)}
.sec-paper{background:var(--paper)}
.sec-dark{background:var(--dark);color:var(--ivory);overflow:hidden}
.sec-dark::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(44rem 24rem at 106% -6%,rgba(200,16,46,.1),transparent 60%),
  radial-gradient(32rem 20rem at -8% 106%,rgba(200,162,80,.06),transparent 55%)}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.2vw,50px);line-height:1.1;letter-spacing:-.018em;color:inherit}
.h2 .ghost{color:var(--red)}
.sec-dark .h2 .ghost{color:var(--red-l)}
.sub{color:var(--ink-60);max-width:580px;margin-top:18px;font-size:17px}
.sec-dark .sub{color:var(--ivory-60)}
.sec-head{margin-bottom:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;position:relative;z-index:2}
.sec-head::before{content:attr(data-wm);position:absolute;right:-6px;top:-54px;font-family:var(--disp);font-weight:400;font-size:clamp(100px,14vw,180px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(18,18,18,.10);pointer-events:none;z-index:-1}
.sec-dark .sec-head::before{-webkit-text-stroke:1px rgba(244,241,234,.09)}

/* ---------------- About (dark) ---------------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}
.statement{font-size:clamp(19px,2.1vw,24px);line-height:1.65;color:var(--ivory)}
.bio{color:var(--ivory-60);font-size:16px;white-space:pre-line}
.kpoints li{display:flex;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line-d2);font-size:15.5px;color:var(--ivory-60);line-height:1.6}
.kpoints li:last-child{border-bottom:0}
.kpoints li span:last-child{padding-top:2px}
.kpoints li:hover{color:var(--ivory)}
.kp-x{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(200,16,46,.5);color:var(--red-l);font-size:11px;background:rgba(200,16,46,.07);padding-top:0!important}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:0}
.facts-wide{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.fact{position:relative;border:1px solid var(--line-d);background:var(--panel-d);padding:30px 28px;overflow:hidden;transition:.3s}
.fact::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:.35s}
.fact:hover{border-color:rgba(200,16,46,.45);transform:translateY(-4px)}
.fact:hover::after{transform:none}
.fact .ico{display:block;width:32px;height:32px;color:var(--red-l);margin-bottom:18px}
.fact h4{font-family:var(--cond);font-weight:700;font-size:15.5px;line-height:1.45;color:var(--ivory);margin-bottom:6px}
.fact small{display:block;font-size:13px;color:var(--ivory-40);letter-spacing:.3px}
.philo{position:relative;margin-top:22px;padding:44px 48px;border:1px solid var(--line-d);border-left:3px solid var(--red);background:linear-gradient(100deg,rgba(200,16,46,.08),rgba(200,162,80,.04) 70%);color:var(--ivory);display:flex;gap:30px;align-items:flex-start}
.philo p{font-size:clamp(16.5px,1.5vw,19px);line-height:1.85;font-style:italic;max-width:980px}
.philo .philo-x{flex:0 0 auto;font-family:var(--disp);font-size:46px;line-height:1;color:var(--red);opacity:.85}
.philo .philo-by{display:block;margin-top:16px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-style:normal}
.sig{margin-top:32px;font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.2px;color:var(--ivory)}
.sig small{display:block;font-family:var(--body);font-size:12.5px;color:var(--ivory-40);letter-spacing:3px;text-transform:uppercase;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d);margin-top:84px}
.stat{padding:44px 30px 6px;border-left:1px solid var(--line-d)}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-family:var(--disp);font-weight:400;font-size:60px;line-height:1;color:var(--ivory)}
.stat:nth-child(2) .n,.stat:nth-child(4) .n{color:var(--red-l)}
.stat .t{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--ivory-40)}

/* ---------------- Education & Qualifications (dark section) ---------------- */
.edu{margin-top:0}
.edu-h{display:flex;align-items:center;gap:14px;font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.edu-h .kp-x{flex:0 0 28px;height:28px}
.edu-list{border-top:1px solid var(--line-d)}
.edu-row{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:22px 4px;border-bottom:1px dashed var(--line-d2);transition:padding .25s}
.edu-row:hover{padding-left:12px}
.edu-yr{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--red-l);padding-top:3px}
.edu-main h5{font-family:var(--cond);font-weight:700;font-size:18px;color:var(--ivory);margin-bottom:4px;line-height:1.4}
.edu-main span{display:block;color:var(--ivory-60);font-size:15px;line-height:1.55}

/* ---------------- Conferences block (dark, in Research) ---------------- */
.events-wrap{margin-top:60px;position:relative;z-index:2}
.block-h{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.evlist .pub:first-child{border-top:1px solid var(--line-d)}

/* ---------------- Expertise rows (light) ---------------- */
.xrows{border-top:1px solid var(--line-l)}
.xrow{display:grid;grid-template-columns:54px 60px 1.1fr 1.3fr 56px;gap:22px;align-items:center;padding:28px 8px;border-bottom:1px solid var(--line-l);transition:.35s cubic-bezier(.2,.7,.3,1)}
.xrow .no{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--ink-40)}
.xrow > .ico{width:46px;height:46px;border:1px solid var(--line-l);border-radius:50%;padding:10px;transition:.35s}
.xrow:hover > .ico{border-color:rgba(244,241,234,.35);color:var(--red-l)}
.xrow h3{font-family:var(--cond);font-weight:700;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.01em;color:var(--ink)}
.xrow p{color:var(--ink-60);font-size:15.5px}
.xrow .arr{font-size:20px;color:var(--red);opacity:0;transform:translateX(-10px);transition:.35s}
.xrow:hover{background:var(--dark);padding-left:28px;padding-right:28px}
.xrow:hover h3{color:var(--ivory)}
.xrow:hover .no{color:var(--gold)}
.xrow:hover p{color:var(--ivory-60)}
.xrow:hover .arr{opacity:1;transform:none}

/* ---------------- Tabs (context aware) ---------------- */
.tabs{display:inline-flex;gap:8px;flex-wrap:wrap;margin-bottom:48px;padding:8px;background:#fff;border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.tb{position:relative;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.8px;text-transform:uppercase;padding:14px 30px;border:1.5px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:.2s}
.tb:hover{border-color:var(--ink)}
.tb.on{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(200,16,46,.35)}
.tb.on::after{content:'';position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--red)}
.sec-dark .tabs{background:var(--panel-d);border-color:var(--line-d);box-shadow:5px 5px 0 rgba(244,241,234,.12)}
.sec-dark .tb{color:var(--ivory)}
.sec-dark .tb:hover{border-color:var(--ivory-60)}
.sec-dark .tb.on{background:var(--red);color:#fff}
.pane{display:none}
.pane.on{display:block;animation:fade .5s ease}

/* ---------------- Experience rows (light/paper) ---------------- */
.trow{display:grid;grid-template-columns:190px 1fr;gap:34px;padding:30px 0;border-bottom:1px solid var(--line-l)}
.trow:last-child{border-bottom:0}
.trow .when{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--red);padding-top:5px}
.trow h3{font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:4px;color:var(--ink);transition:.2s}
.trow:hover h3{color:var(--red)}
.trow .org{color:var(--ink-60);font-size:16px}
.trow .des{color:var(--ink-40);font-size:15px;margin-top:8px;max-width:680px}

/* ---------------- Research / publications (dark) ---------------- */
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px;position:relative;z-index:2}
.chip{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:12px 20px;border:1px solid var(--line-d);color:var(--ivory-60);transition:.2s}
.chip:hover{border-color:var(--gold)}
.chip b{font-family:var(--disp);color:var(--gold);margin-right:8px;font-size:15px;font-weight:400}
.pub{padding:26px 0;border-bottom:1px solid var(--line-d);display:grid;grid-template-columns:1fr auto;gap:8px 30px;align-items:start;transition:.2s}
.pub:hover{padding-left:14px;background:rgba(244,241,234,.03)}
.pub:last-child{border-bottom:0}
.pub h3{font-weight:400;font-size:18.5px;line-height:1.5;color:var(--ivory)}
.pub .meta{color:var(--ivory-40);font-size:15px;margin-top:6px}
.pub .meta i{color:var(--ivory-60)}
.pub .tagz{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tg{font-size:11.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;border:1px solid rgba(200,162,80,.4);color:var(--gold)}
.pub a.go{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--red-l);border-bottom:1px solid var(--red)}
.pub a.go:hover{color:var(--ivory);border-color:var(--ivory)}
.profiles{display:flex;flex-wrap:wrap;gap:12px;margin-top:52px;position:relative;z-index:2}
.profiles a{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;padding:14px 28px;border:1px solid var(--line-d);color:var(--ivory)}
.profiles a:hover{background:var(--ivory);color:var(--dark);border-color:var(--ivory)}
.profiles a::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 2s ease infinite}
.gblocks{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px;position:relative;z-index:2}
.gb{border:1px solid var(--line-d);padding:32px 34px;background:var(--panel-d);transform-style:preserve-3d;transition:transform .25s ease-out,border-color .2s;will-change:transform}
.gb:hover{border-color:rgba(200,162,80,.45)}
.gb h4{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.gb li{padding:8px 0 8px 26px;position:relative;color:var(--ivory-60);font-size:15.5px;border-bottom:1px dashed var(--line-d2)}
.gb li:last-child{border-bottom:0}
.gb li::before{content:'✚';position:absolute;left:0;top:8px;color:var(--red-l);font-size:10px}

/* ---------------- Awards (light) ---------------- */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1200px}
.acard{background:#fff;border:1px solid var(--line-l2);padding:36px 32px;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out,border-color .2s,box-shadow .3s;will-change:transform;box-shadow:0 8px 30px rgba(18,18,18,.05)}
.acard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:.4s}
.acard:hover{border-color:rgba(200,16,46,.35);box-shadow:0 26px 60px rgba(18,18,18,.14)}
.acard:hover::after{transform:none}
.acard .ico{margin-bottom:18px;width:30px;height:30px;color:var(--gold)}
.acard .yr{font-family:var(--cond);font-weight:800;font-size:14.5px;letter-spacing:1.2px;color:var(--red)}
.acard h3{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.4;margin:10px 0 8px;color:var(--ink)}
.acard p{color:var(--ink-60);font-size:15.5px}
.mq2{margin-top:70px;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);padding:15px 0;overflow:hidden}
.mq2 .mq-track{animation-duration:38s}
.mq2 .mq-item{color:var(--ink-60);font-size:13.5px;letter-spacing:1.2px}
.mq2 .mq-item::after{color:var(--red)}

/* ---------------- Memberships (light section) ---------------- */
.members{margin-top:0}
.members-h{display:flex;align-items:center;gap:14px;font-family:var(--cond);font-weight:800;font-size:clamp(17px,1.9vw,22px);letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin-bottom:28px}
.members-h::before{content:'';width:28px;height:2px;background:var(--red);flex:0 0 auto}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mcard{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line-l2);border-left:3px solid var(--red);padding:20px 22px;transition:transform .25s,box-shadow .3s,border-color .2s;box-shadow:0 6px 24px rgba(18,18,18,.04)}
.mcard:hover{border-left-color:var(--red);border-color:rgba(200,16,46,.35);transform:translateY(-3px);box-shadow:0 18px 44px rgba(18,18,18,.1)}
.mcard .m-x{flex:0 0 auto;color:var(--red);font-size:13px;line-height:1;margin-top:4px}
.mcard .m-body strong{display:block;font-family:var(--cond);font-weight:700;font-size:16px;line-height:1.4;color:var(--ink)}
.mcard .m-body span{display:block;margin-top:5px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:var(--ink-40)}
@media (max-width:860px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mgrid{grid-template-columns:1fr}}

/* ---------------- Gallery (paper/light) ---------------- */
.gstrip{display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.gstrip::-webkit-scrollbar{height:6px}
.gstrip::-webkit-scrollbar-thumb{background:var(--line-l);border-radius:10px}
.gph{flex:0 0 340px;scroll-snap-align:start;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--light-2);position:relative;border:1px solid var(--line-l2)}
.gph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gph:hover img{transform:scale(1.06)}
.gph .cap{position:absolute;inset:auto 0 0 0;padding:30px 16px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-size:13.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;opacity:0;transition:.3s}
.gph:hover .cap{opacity:1}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:400;display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh}
.lightbox .x{position:absolute;top:18px;right:28px;color:#fff;font-size:40px;cursor:pointer;line-height:1}

/* ---------------- Resources (light) ---------------- */
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rcard{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;border:1px solid var(--line-l2);padding:24px 28px;transition:.2s;box-shadow:0 6px 24px rgba(18,18,18,.04)}
.rcard:hover{border-color:var(--red)}
.rcard h3{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.rcard small{display:block;color:var(--ink-40);font-size:13px;letter-spacing:2.4px;text-transform:uppercase;font-weight:500;margin-top:4px}
.rcard .dl{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--red);white-space:nowrap}
.rcard .dl:hover{color:var(--ink);border-color:var(--ink)}

/* ---------------- Contact (dark) ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;position:relative;z-index:2}
.bigmail{display:inline-block;max-width:100%;font-family:var(--cond);font-weight:800;font-size:clamp(15px,1.7vw,21px);letter-spacing:-.01em;line-height:1.35;color:var(--ivory);border-bottom:2px solid var(--red);padding-bottom:6px;margin:26px 0 36px;word-break:normal;overflow-wrap:anywhere}
.bigmail:hover{color:var(--red-l)}
.cline{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-d2);font-size:16px;color:var(--ivory-60);align-items:baseline}
.cline:last-child{border-bottom:0}
.cline b{font-family:var(--cond);color:var(--ivory);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;flex:0 0 110px}
.cline span{white-space:pre-line}
.cline a{color:var(--red-l)}
.cline a:hover{color:var(--ivory)}
.si{display:block;width:100%;height:100%}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-d);color:var(--ivory-60);transition:transform .2s,background .2s,border-color .2s,color .2s}
.socials a:hover{border-color:var(--red);background:var(--red);color:#fff;transform:translateY(-3px)}
.socials .si{width:19px;height:19px}
.cform{background:var(--panel-d);border:1px solid var(--line-d);border-top:3px solid var(--red);padding:42px;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.cform label{display:block;font-size:12.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--ivory-40);margin-bottom:8px}
.cform .f{margin-bottom:20px}
.cform input,.cform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-d);padding:13px 2px;color:var(--ivory);font-family:var(--body);font-size:16px;transition:border-color .2s}
.cform input:focus,.cform textarea:focus{outline:0;border-color:var(--red)}
.cform textarea{min-height:110px;resize:vertical}
.alert{padding:15px 20px;margin-bottom:22px;font-size:14px;font-weight:500}
.alert.ok{background:rgba(200,162,80,.1);border:1px solid rgba(200,162,80,.4);color:var(--gold)}
.alert.err{background:rgba(200,16,46,.12);border:1px solid rgba(200,16,46,.45);color:var(--red-l)}

/* ---------------- Footer (dark) ---------------- */
.ft{background:var(--dark);color:var(--ivory-60);border-top:3px solid var(--red)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:50px;padding:64px 0 54px}
.ft .wordmark{color:var(--ivory);font-size:20px}
.ft-tag{margin:16px 0 22px;font-size:14.5px;line-height:1.8;color:var(--ivory-60);max-width:340px}
.ft-mail{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:0;color:var(--ivory);border-bottom:1.5px solid var(--red);padding-bottom:3px}
.ft-mail:hover{color:var(--red-l)}
.ft-col h5{font-family:var(--cond);font-weight:800;font-size:14.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ivory);margin-bottom:18px;position:relative;padding-bottom:10px}
.ft-col h5::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--red)}
.ft-col li{margin-bottom:11px;font-size:14.5px}
.ft-col a:hover{color:var(--ivory)}
.ft-social li a{display:inline-flex;align-items:center;gap:10px}
.ft-social .si{width:15px;height:15px;flex:0 0 auto;opacity:.85;color:var(--red-l)}
.ft-social li a:hover .si{opacity:1}
.ft-bottom{border-top:1px solid var(--line-d);padding:20px 0}
.ft-bottom-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;letter-spacing:.4px;color:var(--ivory-40)}
.ft .credit a{color:var(--red-l);font-weight:700}
.ft .credit a:hover{color:var(--ivory)}
@media (max-width:1024px){.ft-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr;gap:34px;padding:48px 0 40px}}

/* ---------------- Reveal (lightweight) ---------------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.25,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;opacity:1;transition:none}
  .mq-track,.spin-badge svg,.por .arch::after,.hello::before,.eyebrow::before,.profiles a::before,.hero .aura,.por-card{animation:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .hero-in{grid-template-columns:1fr;gap:74px}
  .por{justify-self:center}
  .por-card{right:6px;top:auto;bottom:16px;padding:11px 16px 10px}
  .por-card b{font-size:24px}
  .about-grid{grid-template-columns:1fr;gap:46px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:32px 22px 6px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:54px}
  .gblocks{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hd nav{position:fixed;top:72px;right:-300px;width:280px;height:calc(100vh - 72px);background:var(--dark);border-left:1px solid var(--line-d);flex-direction:column;align-items:flex-start;padding:26px 20px;transition:right .35s}
  .hd nav.open{right:0}
  .hd nav a{width:100%;padding:13px 14px;font-size:13px}
  .hd .cta{margin:10px 0 0}
  .burger{display:block}
  .xrow{grid-template-columns:34px 44px 1fr;gap:10px 14px}
  .xrow p{grid-column:1/-1}
  .xrow .arr{display:none}
  .trow{grid-template-columns:1fr;gap:6px}
  .pub{grid-template-columns:1fr}
  .pub .tagz{justify-content:flex-start}
  .edu-row{grid-template-columns:1fr;gap:5px;padding:18px 4px}
  .edu-row:hover{padding-left:4px}
  /* hide the giant decorative section-number watermark (was overlapping titles) */
  .sec-head::before{display:none}
  /* disable heavy hero background canvas on small screens */
  #helix{display:none}
  /* Experience / Publications tabs: tidy 2-per-row buttons */
  .tabs{display:flex;flex-wrap:wrap;width:100%;gap:6px;margin-bottom:36px;box-shadow:3px 3px 0 var(--ink)}
  .sec-dark .tabs{box-shadow:3px 3px 0 rgba(244,241,234,.12)}
  .tb{flex:1 1 40%;justify-content:center;text-align:center;padding:12px 10px;font-size:12.5px;letter-spacing:.4px}
  .tb.on::after{display:none}
  .trow .when{padding-top:0;margin-bottom:2px}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .philo{flex-direction:column;gap:14px;padding:32px 26px}
  .sec{padding:80px 0}
  .agrid,.rgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;padding-left:0}
  .spin-badge{left:50%;transform:translateX(-50%);bottom:-46px}
  .por-card{display:none}
  .hero{padding-bottom:132px}
  .gph{flex-basis:280px}
  .cform{padding:30px 24px}
  .hero{padding-top:150px}
}

/* ================ TEXT / MOTION / CARD ANIMATIONS ================ */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes popin{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}

/* typewriter caret on hero greeting */
.tw{font-style:normal}
.tw::after{content:'';display:inline-block;width:2px;height:1.05em;background:var(--red);margin-left:4px;vertical-align:-3px;animation:blink .8s steps(2) infinite}
.tw.done::after{display:none}

/* word-by-word reveal (hero name + section titles) */
body.js .hero h1 .ln{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
body.js .hero h1 .w{display:inline-block;opacity:0;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .55s ease}
body.js .hero h1.play .w{opacity:1;transform:translateY(0)}
body.js .h2 .w{display:inline-block;opacity:0;transform:translateY(26px) rotate(1deg);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.25,1)}
body.js .h2.play .w{opacity:1;transform:none}

/* hero entrance choreography */
body.js .hero .roles{animation:rise .7s .5s ease both}
body.js .hero .quote{animation:rise .7s .65s ease both}
body.js .hero .hero-cta{animation:rise .7s .8s ease both}
body.js .hero .hero-chips{animation:rise .7s .95s ease both}
body.js .hero .por{animation:popin .9s .3s cubic-bezier(.2,.7,.25,1) both}
body.js .hero .scroll-cue{animation:rise .7s 1.2s ease both}

/* staggered card / item entrances */
body.js .stagger-item{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.25,1)}
body.js .stagger-item.sin{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  body.js .hero h1 .w,body.js .h2 .w,body.js .stagger-item{opacity:1;transform:none;transition:none}
  body.js .hero .roles,body.js .hero .quote,body.js .hero .hero-cta,body.js .hero .hero-chips,body.js .hero .por,body.js .hero .scroll-cue{animation:none}
  .tw::after{animation:none}
}