/* Kaushik Desai — portfolio */
:root{
  --navy:#0d1b2a; --ink:#1b263b; --steel:#415a77; --mist:#778da9;
  --sky:#00b4d8; --blue:#0077b6; --pale:#caf0f8; --ice:#edf2fb; --ice2:#d7e3fc;
  --lime:#c6f432;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;--font-body:'DM Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --border:2.5px solid var(--navy); --shadow:4px 4px 0 var(--navy);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--navy);line-height:1.05}
h2{font-size:clamp(2rem,4vw,3rem);margin:10px 0 20px}
a{color:var(--blue)}
.mono{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:96px 0;scroll-margin-top:64px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);border:var(--border);border-radius:99px;padding:6px 16px;z-index:50}
.skip:focus{left:8px}

/* nav */
nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ice2)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{letter-spacing:-.01em;font-family:var(--font-display);font-weight:700;color:var(--navy);text-decoration:none}
.logo span{background:var(--lime);border:var(--border);border-radius:99px;padding:1px 10px;font-size:.8rem;margin-left:6px}
nav ul{display:flex;gap:28px;list-style:none;font-size:.9rem}
nav ul a{color:var(--ink);text-decoration:none}
nav ul a:hover{color:var(--blue)}

/* buttons / pills */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;color:var(--navy);text-decoration:none;border:var(--border);border-radius:99px;padding:12px 26px;box-shadow:var(--shadow);background:#fff;transition:.15s;cursor:pointer;font-size:1rem}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}
.btn.lime{background:var(--lime)}.btn.blue{background:var(--sky)}
.btn.small{padding:8px 20px;box-shadow:3px 3px 0 var(--navy)}
.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.pill{display:inline-flex;gap:8px;align-items:center;border:var(--border);border-radius:99px;padding:4px 14px;background:#fff;font-size:.85rem}
.dot{width:9px;height:9px;border-radius:50%;background:#2fbf71}

/* ---------- hero: scroll-driven cell division ---------- */
.hero3{position:relative;height:460vh;background:linear-gradient(180deg,#fff,var(--ice))}
.pin{position:sticky;top:64px;height:calc(100vh - 64px);display:grid;place-items:center;overflow:hidden}
.stage{position:relative;width:min(calc(100vw - 32px),calc((100vh - 64px - 48px)*1.75));aspect-ratio:1400/800;container-type:inline-size}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:pan-y}
.cell-text{position:absolute;left:15%;top:50%;transform:translateY(-50%);width:32%;z-index:2;pointer-events:none;will-change:opacity,transform}
.cell-text a,.cell-text .pill{pointer-events:auto}
.cell-text h1{font-size:3.6cqw;margin:1.1cqw 0 1.2cqw;letter-spacing:-.035em}
.cell-text h1 em,.m-intro h1 em{font-style:normal;background:#fff;border-radius:12px;padding:0 10px}
.cell-text p{margin-bottom:1.8cqw;max-width:30cqw;font-size:max(1.1cqw,13px)}
.dcard{position:absolute;top:61%;transform:translateX(-50%);width:24cqw;text-align:center;z-index:2;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5cqw}
.dcard h3{font-size:max(1.9cqw,16px)}
.dcard p{font-size:max(1cqw,12px)}
.dcard .btn.sm{padding:.7cqw 1.6cqw;font-size:max(1cqw,12px);box-shadow:3px 3px 0 var(--navy)}
.stage .tag{position:absolute;z-index:4;font-family:var(--font-mono);font-size:.72rem;background:var(--lime);border:2px solid var(--navy);border-radius:99px;padding:2px 10px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.phase{position:absolute;left:50%;bottom:-2.4%;transform:translateX(-50%);z-index:3;display:flex;gap:10px;align-items:center;background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:.74rem;padding:7px 18px;border-radius:99px;white-space:nowrap}
.phase i{width:9px;height:9px;border-radius:50%;background:var(--lime);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.6);opacity:.5}}
.bar{position:absolute;left:50%;bottom:-6.4%;transform:translateX(-50%);width:26cqw;height:5px;border-radius:9px;background:var(--ice2)}
.bar b{display:block;height:100%;width:0;border-radius:9px;background:var(--blue)}
.org{cursor:grab;transform-box:view-box;transform-origin:0 0;transition:none;outline:none}
.org.drag{cursor:grabbing}
.org:focus-visible .in{filter:drop-shadow(0 0 6px var(--blue))}
.org .in{transform-box:fill-box;transform-origin:center;animation:fl 7s ease-in-out infinite;transition:scale .25s}
.org:hover .in{scale:1.12}
.org .in.calm{animation:flcalm 11s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-10px)}}
@keyframes flcalm{50%{transform:translateY(-3px)}}
.m-intro{display:none;padding:12px 20px 0;overflow:hidden;width:100%}
.m-intro h1{font-size:2rem;margin:10px 0;letter-spacing:-.035em}
.m-intro h1 em{background:#fff}
.m-intro p{font-size:.95rem}
.hero3.static{height:auto}
.hero3.static .pin{position:static;height:auto;padding:24px 0}
.hero3.static .phase,.hero3.static .bar{display:none}

.marquee{background:var(--navy);color:#fff;padding:18px 0;overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;animation:mq 30s linear infinite;font-family:var(--font-display);font-size:1.25rem}
.marquee span{margin:0 28px;color:var(--pale)}.marquee b{color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}

/* about */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.photo{position:relative;aspect-ratio:4/5;border:var(--border);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;background:repeating-linear-gradient(45deg,var(--ice),var(--ice) 12px,var(--ice2) 12px,var(--ice2) 24px);display:grid;place-items:center;font-family:var(--font-mono);color:var(--steel);font-size:.8rem}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.about p+p{margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{border:2px solid var(--navy);border-radius:99px;padding:3px 14px;font-size:.82rem;background:#fff}
.chip.on{background:var(--pale)}
.stats-head{margin:72px 0 22px;text-align:center}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:760px;margin:0 auto}
.bubble{flex:0 0 calc((100% - 80px)/5);max-width:136px;aspect-ratio:1;border-radius:50%;border:var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:3px 3px 0 var(--navy);padding:14px;font-size:.72rem;line-height:1.25;transition:transform .2s}
.bubble:hover{transform:translateY(-4px) rotate(-3deg)}
.bubble b{font-family:var(--font-display);font-size:2rem;color:var(--navy);line-height:1;margin-bottom:3px}
.bubble b.sm{font-size:1.35rem;margin-bottom:5px}
.b1{background:var(--pale)}.b2{background:var(--lime)}.b3{background:var(--ice2)}.b4{background:#fff}

/* journey */
.band{background:var(--navy);color:#cfd8e6}
.band h2,.band h3{color:#fff}.band .mono{color:var(--lime)}
.tl{margin-top:32px;border-top:1.5px solid var(--steel)}
.row{display:grid;grid-template-columns:150px 1fr 1.2fr;gap:24px;padding:26px 0;border-bottom:1.5px solid var(--steel);transition:.2s}
.row:hover{background:var(--ink);padding-left:14px}
.row .when{font-family:var(--font-mono);font-size:.78rem;color:var(--mist)}
.row h3{font-size:1.4rem}.row small{color:var(--mist)}

/* work */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.card{border:var(--border);border-radius:22px;padding:26px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.card .ico{width:54px;height:54px;border:var(--border);border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--pale)}
.card h3{font-size:1.3rem}
.card .more{margin-top:auto;font-family:var(--font-display);font-weight:700;color:var(--navy)}
.card.feat{grid-column:span 3;flex-direction:row;gap:32px;align-items:center;background:var(--ice)}
.card.feat .mock{position:relative;flex:1;aspect-ratio:16/9;border:var(--border);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--steel));display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:.8rem;width:100%}
.card.feat .mock.alt{background:linear-gradient(135deg,var(--blue),var(--sky))}
.card.feat .mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.card.feat>div:last-child{flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* work: projects + skills */
.cards.projects{margin-top:24px}
.card.proj .mock{position:relative;width:100%;aspect-ratio:16/9;border:var(--border);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--steel));display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:.85rem}
.card.proj .mock.alt{background:linear-gradient(135deg,var(--blue),var(--sky))}
.card.proj .mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.card.proj .btn{margin-top:auto}
.skills{margin-top:88px;text-align:center}
.skill-group{margin-top:28px}
.skill-group h3{font-size:1.1rem;margin-bottom:16px}
.skill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:560px;margin:0 auto}
.skill{width:128px;height:128px;border-radius:50%;border:var(--border);box-shadow:3px 3px 0 var(--navy);display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;line-height:1.15;padding:8px;color:var(--navy);transition:transform .2s}
.skill:hover{transform:translateY(-4px) rotate(-3deg)}
.s1{background:var(--pale)}.s2{background:var(--ice2)}.s3{background:#fff}.s4{background:#90e0ef}.s5{background:var(--lime)}

/* research */
.pubs-wrap{background:var(--ice)}
.pub{display:flex;gap:20px;padding:18px 0;border-bottom:1.5px solid var(--ice2);align-items:baseline}
.pub .n{font-family:var(--font-mono);color:var(--blue)}
.pub b{font-family:var(--font-display);color:var(--navy);font-size:1.1rem;font-weight:700}
.pub>div{flex:1}
.pub{align-items:center}
.pub small{color:var(--steel)}
.pub-link{white-space:nowrap;flex-shrink:0;background:var(--lime);font-size:.85rem}
.pub-link:not([href]){opacity:.45;cursor:not-allowed;box-shadow:none;background:#fff}
.pub-link:not([href]):hover{transform:none}
.cred{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.cred h3{font-size:1.1rem;margin-bottom:10px}
.cred ul{list-style:none;font-size:.92rem}
.cred li{padding:6px 0;border-bottom:1px solid var(--ice2)}

/* contact */
.contact{background:var(--sky);border-top:var(--border);border-bottom:var(--border)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact h2{font-size:clamp(2.4rem,5vw,4rem);margin:10px 0 18px}
.links{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
form{background:#fff;border:var(--border);border-radius:24px;padding:28px;box-shadow:var(--shadow);display:grid;gap:14px}
label{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:.9rem;display:grid;gap:6px}
input,textarea{font:inherit;color:var(--ink);border:var(--border);border-radius:14px;padding:12px 14px;background:var(--ice);width:100%}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.status{font-size:.9rem;min-height:1.4em}
.status.ok{color:#0a7a3f}.status.err{color:#b3261e}

@media(max-width:900px){
  .about,.row,.cards,.cards.projects,.contact .wrap{grid-template-columns:1fr}
  .photo{max-width:380px}
  .cred{grid-template-columns:1fr 1fr}
  .pub{flex-wrap:wrap}.pub-link{margin-left:48px}
  .card.feat{grid-column:auto;flex-direction:column}
  nav ul{display:none}
  section{padding:72px 0}
}
@media(max-width:760px){
  .skill{width:104px;height:104px;font-size:.66rem;padding:6px}.skill-row{gap:10px;max-width:350px}
  .stats{gap:12px}.bubble{flex-basis:calc((100% - 24px)/3);padding:8px;font-size:.66rem}.bubble b{font-size:1.5rem}.bubble b.sm{font-size:1.05rem}
  .m-intro{display:block}.cell-text{display:none}
  .pin{display:flex;flex-direction:column;justify-content:center;gap:10px}
  .logo span{display:none}
  .btn.small{white-space:nowrap}
  .hero3{height:380vh}
  .dcard{top:57%;width:30cqw}.dcard h3{font-size:.68rem}.dcard p,.dcard a{display:none}
  .phase{font-size:.62rem;padding:5px 12px}
  .cred{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .org .in,.marquee div,.phase i{animation:none}
}

/* ---------- social icons ---------- */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.social a{width:42px;height:42px;border-radius:50%;border:var(--border);background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:2px 2px 0 var(--navy);transition:.15s}
.social a{--ic-bg:#fff}
.social a svg{width:20px;height:20px}
.social a text{fill:var(--ic-bg)}
.social a:hover{--ic-bg:var(--lime);background:var(--lime);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--navy)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#cfd8e6;padding:64px 0 28px;font-size:.92rem;text-align:left}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.foot-brand .logo{color:#fff;font-size:1.3rem}
.foot-brand p{margin-top:10px;max-width:340px;color:#aab6c8}
.site-footer h4{font-family:var(--font-mono);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.site-footer ul{list-style:none;padding:0}
.site-footer li{padding:4px 0}
.site-footer a{color:#cfd8e6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.social.on-dark a{--ic-bg:var(--navy);background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.social.on-dark a:hover{--ic-bg:var(--lime);background:var(--lime);color:var(--navy);border-color:var(--lime);transform:none}
.disclaimer{margin-top:44px;padding-top:24px;border-top:1px solid var(--steel);font-size:.82rem;color:#8e9db3;max-width:760px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;margin-top:20px;font-size:.85rem;color:#aab6c8}
.views b{color:var(--lime);font-family:var(--font-mono);font-weight:500}

/* ---------- legal page ---------- */
.wrap.narrow{max-width:780px}
.legal{padding:72px 0 88px}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.035em;margin:10px 0 6px}
.legal .meta{color:var(--steel);font-size:.9rem;margin-bottom:28px}
.legal h2{font-size:1.5rem;margin:36px 0 10px}
.legal h3{font-size:1.1rem;margin:22px 0 6px}
.legal p,.legal li{margin-bottom:10px}
.legal ul{padding-left:22px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}