/* raneshkumar.com - site stylesheet */

/* Variable fonts: one file per family covers the full declared weight range */
@font-face { font-family:'Manrope'; src:url("/fonts/manrope-200-800.woff2") format('woff2'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url("/fonts/jetbrains-mono-100-800.woff2") format('woff2'); font-weight:100 800; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url("/fonts/fraunces-100-900.woff2") format('woff2'); font-weight:100 900; font-display:swap; }

:root{
  --bg-base:#171b22; --bg-surface:#1d222b; --bg-elevated:#242b37; --bg-inset:#11151b;
  --fg-primary:#eef1f5; --fg-secondary:#aeb8c6; --fg-muted:#7d8799; --fg-faint:#566173;
  --line-default:#2c333f; --line-strong:#3a4351; --line-accent:#305f67;
  --accent:#2fd4c6; --accent-soft:rgba(47,212,198,0.16); --accent-dim:rgba(47,212,198,0.32);
  --ok:#34d399;
  --font-sans:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-display:'Fraunces',Georgia,serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  min-height:100vh;background-color:var(--bg-base);
  background-image:
    radial-gradient(110% 70% at 12% -8%, rgba(47,212,198,0.06), transparent 55%),
    radial-gradient(90% 55% at 100% 0%, rgba(120,130,150,0.04), transparent 50%);
  color:var(--fg-primary);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'ss01','cv11';
  position:relative;overflow-x:hidden;
}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.025;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.45;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 22%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 22%, transparent 72%);}
.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 28px;}
.eyebrow{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-muted);font-weight:600;}
a{color:inherit;}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);background:rgba(23,27,34,0.62);border-bottom:1px solid var(--line-default);}
.site-inner{display:flex;align-items:center;justify-content:space-between;height:62px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg-primary);}
.glyph{display:grid;place-items:center;height:31px;width:31px;border-radius:5px;border:1px solid var(--line-accent);background:var(--accent-soft);box-shadow:0 0 0 1px rgba(47,212,198,0.05),0 0 16px -5px var(--accent-soft);}
.glyph span{font-family:var(--font-display);font-size:15px;line-height:1;color:var(--accent);font-weight:500;}
.brand .name{font-family:var(--font-display);font-size:15px;color:var(--fg-primary);}
.brand .name b{font-weight:540;}
.topnav{display:flex;align-items:center;gap:26px;}
.topnav a{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);text-decoration:none;transition:color 160ms var(--ease-out);}
.topnav a:hover{color:var(--fg-primary);}
.topnav .cta{color:var(--accent);border:1px solid var(--line-accent);border-radius:999px;padding:6px 13px;background:var(--accent-soft);}
.topnav .cta:hover{color:var(--accent);border-color:var(--accent-dim);}
@media(max-width:720px){.topnav a:not(.cta){display:none;}}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,10vh,108px) 0 clamp(30px,5vh,56px);}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
@media(min-width:860px){.hero-grid{grid-template-columns:1.55fr 0.95fr;gap:56px;}}
.status{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-accent);background:var(--accent-soft);border-radius:999px;padding:6px 13px;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.04em;color:var(--accent);margin-bottom:26px;}
.dot{height:6px;width:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 9px -1px var(--accent);}
@media (prefers-reduced-motion: no-preference){.dot.live{animation:breathe 2.6s var(--ease-out) infinite;}}
@keyframes breathe{0%,100%{opacity:1;}50%{opacity:0.4;}}
.hero h1{font-family:var(--font-display);font-weight:340;font-size:clamp(2.7rem,7vw,5.3rem);line-height:0.98;letter-spacing:-0.025em;}
.hero .role{margin-top:18px;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--accent);letter-spacing:-0.01em;}
.hero .bio{margin-top:26px;max-width:52ch;font-size:1.02rem;line-height:1.66;color:var(--fg-secondary);font-weight:300;}
.tags{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--font-mono);font-size:0.7rem;color:var(--fg-secondary);border:1px solid var(--line-default);background:var(--bg-surface);border-radius:5px;padding:5px 10px;letter-spacing:0.02em;}
.chip.accent{color:var(--accent);border-color:var(--line-accent);background:var(--accent-soft);}

/* portrait */
.portrait{position:relative;}
.portrait .frame{position:relative;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--bg-elevated);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.03),0 26px 60px -28px rgba(0,0,0,0.95);aspect-ratio:4/5;}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(0.4) contrast(1.02);display:block;}
.portrait .ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,var(--bg-elevated),var(--bg-elevated) 11px,var(--bg-surface) 11px,var(--bg-surface) 22px);color:var(--fg-faint);font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;}
.portrait .frame::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%, rgba(47,212,198,0.10), transparent 55%);pointer-events:none;}
.portrait .tagchip{position:absolute;left:-10px;bottom:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.66rem;color:var(--fg-secondary);background:var(--bg-inset);border:1px solid var(--line-strong);border-radius:6px;padding:7px 11px;box-shadow:0 14px 30px -16px rgba(0,0,0,0.9);}

/* ---------- waveform divider ---------- */
.wave{border-top:1px solid var(--line-default);border-bottom:1px solid var(--line-default);background:linear-gradient(180deg,rgba(255,255,255,0.012),transparent);position:relative;}
.wave-inner{position:relative;height:128px;overflow:hidden;}
.wave canvas{display:block;width:100%;height:100%;}
.wave .lbl{position:absolute;top:8px;left:2px;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-faint);}
.wave .lbl.r{left:auto;right:2px;color:var(--accent);opacity:0.7;}

/* ---------- sections ---------- */
section.block{padding:clamp(56px,9vh,104px) 0;}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:40px;}
.sec-head .num{font-family:var(--font-mono);font-size:0.72rem;color:var(--accent);}
.sec-head h2{font-family:var(--font-display);font-weight:380;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-0.01em;}

/* timeline */
.timeline{position:relative;margin-left:6px;border-left:1px solid var(--line-default);}
.tl-item{position:relative;padding:0 0 34px 30px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:-5px;top:5px;height:9px;width:9px;border-radius:999px;background:var(--bg-base);border:2px solid var(--line-strong);}
.tl-item.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px -1px var(--accent);}
.tl-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;}
.tl-role{font-size:1.06rem;font-weight:540;color:var(--fg-primary);}
.tl-co{color:var(--fg-secondary);font-weight:400;}
.tl-date{font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-muted);letter-spacing:0.04em;white-space:nowrap;}
.tl-stack{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;}
.tl-stack .s{font-family:var(--font-mono);font-size:0.66rem;color:var(--fg-muted);border:1px solid var(--line-default);border-radius:4px;padding:3px 8px;}
.tl-desc{margin-top:8px;max-width:64ch;font-size:0.92rem;line-height:1.62;color:var(--fg-secondary);font-weight:300;}

/* two-column for edu + skills */
.cols{display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:780px){.cols{grid-template-columns:1fr 1fr;gap:64px;}}
.edu-item{padding:16px 0;border-bottom:1px solid var(--line-default);}
.edu-item:last-child{border-bottom:none;}
.edu-deg{font-size:0.98rem;font-weight:540;color:var(--fg-primary);}
.edu-school{color:var(--fg-secondary);font-weight:400;}
.edu-meta{margin-top:5px;display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:0.7rem;color:var(--fg-muted);}
.skillgroup{margin-bottom:26px;}
.skillgroup .gl{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:12px;}
.skillrow{display:flex;flex-wrap:wrap;gap:8px;}

/* featured work */
.workcard{display:block;text-decoration:none;border:1px solid var(--line-default);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.014),transparent 140px),var(--bg-surface);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.03),0 20px 46px -26px rgba(0,0,0,0.9);transition:border-color 200ms var(--ease-out),transform 200ms var(--ease-out);}
.workcard:hover{border-color:var(--line-accent);transform:translateY(-2px);}
.workcard .wc-body{padding:28px 28px 30px;display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:720px){.workcard .wc-body{grid-template-columns:1.2fr 1fr;align-items:center;gap:36px;}}
.wc-kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.wc-kicker .eyebrow{margin:0;}
.wc-title{font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:-0.01em;color:var(--fg-primary);}
.wc-desc{margin-top:12px;font-size:0.97rem;line-height:1.6;color:var(--fg-muted);font-weight:300;max-width:46ch;}
.wc-link{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:0.74rem;color:var(--accent);letter-spacing:0.03em;}
.wc-vis{border:1px solid var(--line-default);border-radius:8px;background:var(--bg-inset);padding:18px;}
.wc-vis .mini-eq{width:100%;height:96px;display:block;}
.wc-vis .vis-cap{margin-top:10px;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.08em;color:var(--fg-faint);text-transform:uppercase;}

/* contact */
.contact{border-top:1px solid var(--line-default);}
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
@media(min-width:780px){.contact-grid{grid-template-columns:1.3fr 1fr;}}
.contact h2{font-family:var(--font-display);font-weight:340;font-size:clamp(2rem,5vw,3.2rem);line-height:1.04;letter-spacing:-0.02em;}
.contact h2 em{font-style:italic;color:var(--accent);}
.contact .sub{margin-top:18px;color:var(--fg-secondary);font-weight:300;font-size:1.02rem;line-height:1.6;max-width:42ch;}
.email-cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.9rem;color:var(--bg-base);background:var(--accent);border-radius:7px;padding:13px 20px;text-decoration:none;font-weight:600;letter-spacing:0.01em;transition:opacity 160ms var(--ease-out),transform 140ms var(--ease-out);}
.email-cta:hover{opacity:0.9;}
.email-cta:active{transform:scale(0.98);}
.contact-list{display:flex;flex-direction:column;gap:2px;}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-default);text-decoration:none;transition:padding-left 180ms var(--ease-out);}
.contact-row:hover{padding-left:6px;}
.contact-row .k{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-faint);}
.contact-row .v{font-family:var(--font-mono);font-size:0.82rem;color:var(--fg-secondary);transition:color 160ms var(--ease-out);}
.contact-row:hover .v{color:var(--accent);}

/* footer */
footer.site{border-top:1px solid var(--line-default);background:rgba(17,21,27,0.5);}
.foot-inner{padding:30px 0 40px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:0.68rem;color:var(--fg-faint);letter-spacing:0.04em;}
.foot-inner .brand .name{font-size:13px;}
.foot-link{margin-left:14px;color:var(--fg-muted);text-decoration:none;transition:color 160ms var(--ease-out);}
.foot-link:hover{color:var(--accent);}

@media (prefers-reduced-motion: no-preference){
  .reveal{animation:rise 0.7s var(--ease-out) both;}
  .d1{animation-delay:0.05s;} .d2{animation-delay:0.12s;} .d3{animation-delay:0.19s;} .d4{animation-delay:0.26s;}
}
@keyframes rise{from{transform:translateY(15px);}to{transform:translateY(0);}}

/* ---------- 404 page ---------- */
.notfound{padding:clamp(72px,14vh,140px) 0 clamp(56px,10vh,104px);}
.notfound h1{font-family:var(--font-display);font-weight:340;font-size:clamp(2.7rem,7vw,5.3rem);line-height:0.98;letter-spacing:-0.025em;}
.notfound .sub{margin-top:22px;max-width:46ch;font-size:1.02rem;line-height:1.66;color:var(--fg-secondary);font-weight:300;}
.notfound .contact-list{margin-top:34px;max-width:440px;}

/* ---------- privacy page ---------- */
.prose{padding:clamp(56px,10vh,108px) 0 clamp(56px,9vh,104px);}
.prose h1{font-family:var(--font-display);font-weight:340;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-0.02em;}
.prose h2{margin-top:38px;font-family:var(--font-display);font-weight:380;font-size:1.3rem;letter-spacing:-0.01em;}
.prose p{margin-top:12px;max-width:64ch;font-size:1rem;line-height:1.66;color:var(--fg-secondary);font-weight:300;}
.prose p a{color:var(--accent);text-decoration:none;}
.prose p a:hover{text-decoration:underline;}