/* ══════════════════════════════════════════════════════════════════════
   Achal Dixit — shared design system
   Editorial / minimal, emerald accent, light + dark.
   Zero dependencies. Instrument Serif (display) · Instrument Sans (body)
   · JetBrains Mono (accents).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Light theme (default) */
  --white:  #ffffff;
  --bg:     #fafaf9;
  --bg-2:   #f4f4f2;
  --card:   #ffffff;
  --ink:    #0a0a0a;
  --ink-2:  #242424;
  --muted:  #444746;
  --subtle: #62676c;
  --faint:  #9a9da0;
  --rule:   #e6e6e3;
  --rule-2: #f0f0ee;

  /* Emerald system */
  --em:       #047857;
  --em-deep:  #065f46;
  --em-bright:#059669;
  --em-light: #d1fae5;
  --em-glow:  rgba(4,120,87,0.12);
  --em-caustic: rgba(16,185,129,0.06);
  --em-ring:  rgba(4,120,87,0.22);
  --on-em:    #ffffff;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --maxw: 720px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 8px 40px rgba(4,120,87,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 60px rgba(0,0,0,0.10);
}

:root[data-theme="dark"] {
  --white:  #0b0d0c;
  --bg:     #0a0c0b;
  --bg-2:   #101413;
  --card:   #101412;
  --ink:    #f3f5f4;
  --ink-2:  #dfe4e1;
  --muted:  #b3bcb6;
  --subtle: #8b948e;
  --faint:  #5a635e;
  --rule:   #1e2422;
  --rule-2: #171d1b;

  --em:       #34d399;
  --em-deep:  #059669;
  --em-bright:#6ee7b7;
  --em-light: #064e3b;
  --em-glow:  rgba(52,211,153,0.14);
  --em-caustic: rgba(52,211,153,0.05);
  --em-ring:  rgba(52,211,153,0.28);
  --on-em:    #05261c;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 44px rgba(0,0,0,0.5), 0 0 1px rgba(52,211,153,0.15);
  --shadow-lg: 0 20px 70px rgba(0,0,0,0.6);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; animation-iteration-count:1 !important; }
}

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition: background 0.4s ease, color 0.4s ease;
}
::selection { background:var(--em-light); color:var(--em-deep); }
:root[data-theme="dark"] ::selection { background:var(--em-deep); color:var(--em-bright); }
a { color:inherit; }
img { max-width:100%; display:block; }

/* ── CUSTOM CURSOR (desktop only, JS-gated) ────────────────── */
#cursor {
  width:7px; height:7px;
  background: radial-gradient(circle, var(--em-bright) 0%, var(--em) 60%, transparent 100%);
  border-radius:50%; position:fixed; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); opacity:0;
  transition: opacity .2s, width .2s, height .2s, filter .2s;
}
#cursor-glow {
  width:38px; height:38px;
  background: radial-gradient(circle, var(--em-glow) 0%, transparent 70%);
  border-radius:50%; position:fixed; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); opacity:0; transition: opacity .3s;
}
html.has-cursor body:hover #cursor,
html.has-cursor body:hover #cursor-glow { opacity:1; }

/* ── NAV ───────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:72px; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--rule);
  transition: background .4s, border-color .4s;
}
.nav-name {
  font-family:var(--body); font-size:1.05rem; font-weight:700;
  letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
}
.nav-name .dot { color:var(--em); }
.nav-right { display:flex; align-items:center; gap:.15rem; }
.nav-link {
  font-size:.85rem; color:var(--muted); text-decoration:none;
  padding:.35rem .7rem; border-radius:7px;
  transition:color .15s, background .15s;
}
.nav-link:hover, .nav-link.active { color:var(--ink); background:var(--bg-2); }
.nav-link.active { color:var(--em); }
.nav-cta {
  font-size:.8rem; font-weight:600; color:var(--on-em); background:var(--em);
  text-decoration:none; padding:.42rem .9rem; border-radius:7px; margin-left:.4rem;
  transition: background .25s, box-shadow .25s, transform .15s;
}
.nav-cta:hover { background:var(--em-deep); box-shadow:0 0 22px var(--em-ring); transform:translateY(-1px); }

/* icon buttons (theme toggle, cmd-k) */
.icon-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid var(--rule);
  background:transparent; color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color:var(--em); border-color:var(--em); background:var(--bg-2); }
.icon-btn svg { width:15px; height:15px; }
.kbd {
  font-family:var(--mono); font-size:.62rem; color:var(--subtle);
  border:1px solid var(--rule); border-radius:5px; padding:.15rem .38rem;
  display:inline-flex; gap:.15rem; align-items:center; background:var(--bg-2);
}
.cmdk-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .5rem .32rem .6rem;
  border:1px solid var(--rule); border-radius:8px; background:transparent; cursor:pointer;
  color:var(--subtle); font-family:var(--body); font-size:.78rem; transition:border-color .15s,color .15s; }
.cmdk-btn:hover { border-color:var(--em); color:var(--em); }

/* ── LAYOUT ────────────────────────────────────────────────── */
main { max-width:var(--maxw); margin:0 auto; padding:0 2rem; }
.wide { max-width:920px; }

section.s { padding:56px 0; border-bottom:1px solid var(--rule); }
.s-label {
  font-family:var(--mono); font-size:.72rem; color:var(--subtle);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.6rem;
  display:flex; align-items:center; gap:.6rem;
}
.s-label::after { content:''; flex:1; height:1px; background:var(--rule); }
.s-label .idx { color:var(--em); }
.s-h2 {
  font-family:var(--display); font-size:2rem; font-weight:400;
  letter-spacing:-0.01em; line-height:1.1; color:var(--ink); margin-bottom:.6rem;
}
.s-sub { font-size:1rem; color:var(--muted); line-height:1.7; max-width:560px; margin-bottom:2rem; }
.em { color:var(--em); font-weight:600; }
.serif-em { font-family:var(--display); font-style:italic; color:var(--muted); }

/* ── HERO ──────────────────────────────────────────────────── */
#hero { padding-top:120px; padding-bottom:64px; border-bottom:1px solid var(--rule); }
.eyebrow {
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--em); margin-bottom:1.4rem; display:inline-flex; align-items:center; gap:.5rem;
  opacity:0; animation:up .55s ease .02s forwards;
}
.eyebrow .pulse { width:6px; height:6px; border-radius:50%; background:var(--em); box-shadow:0 0 8px var(--em-ring); animation:pulse 2.4s ease-in-out infinite; }
h1 {
  font-family:var(--display); font-size:clamp(2.7rem,6vw,4.1rem);
  font-weight:400; letter-spacing:-0.02em; line-height:1.05;
  color:var(--ink); margin-bottom:1.4rem;
  opacity:0; animation:up .6s ease .1s forwards;
}
h1 em { font-style:italic; color:var(--em); }
.hero-p {
  font-size:1.08rem; color:var(--muted); line-height:1.72;
  max-width:580px; margin-bottom:2rem;
  opacity:0; animation:up .6s ease .22s forwards;
}
.hero-p strong { color:var(--ink); font-weight:600; }
.btns { display:flex; gap:.6rem; flex-wrap:wrap; opacity:0; animation:up .6s ease .34s forwards; }

.btn-p {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--body); font-size:.85rem; font-weight:600;
  background:var(--em); color:var(--on-em); text-decoration:none;
  padding:.62rem 1.25rem; border-radius:8px; position:relative; overflow:hidden;
  transition: background .3s, box-shadow .3s, transform .15s;
}
.btn-p:hover { background:var(--em-deep); box-shadow:0 6px 26px var(--em-ring); transform:translateY(-1px); }
.btn-s {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--body); font-size:.85rem; color:var(--muted); text-decoration:none;
  padding:.62rem 1.15rem; border:1px solid var(--rule); border-radius:8px;
  transition:color .2s, border-color .2s, transform .15s;
}
.btn-s:hover { color:var(--em); border-color:var(--em); transform:translateY(-1px); }

/* ── STATS ─────────────────────────────────────────────────── */
.stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  margin-top:2.6rem; background:var(--card);
  opacity:0; animation:up .6s ease .46s forwards;
}
.st { padding:1.25rem 1rem; border-right:1px solid var(--rule); position:relative; overflow:hidden; transition:background .2s; }
.st:last-child { border-right:none; }
.st::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, var(--em-caustic) 0%, transparent 70%); opacity:0; transition:opacity .35s; }
.st:hover { background:var(--bg-2); }
.st:hover::after { opacity:1; }
.st-n { font-family:var(--display); font-size:1.75rem; font-weight:400; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); margin-bottom:.2rem; position:relative; z-index:1; }
.st-n .g { color:var(--em); }
.st-l { font-family:var(--mono); font-size:.68rem; color:var(--subtle); line-height:1.4; letter-spacing:.01em; position:relative; z-index:1; }

/* ── PILLS / CHIPS ─────────────────────────────────────────── */
.tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.tag {
  font-family:var(--mono); font-size:.58rem; color:var(--subtle);
  border:1px solid var(--rule); padding:.16rem .45rem; border-radius:5px; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.tag.em { color:var(--em); border-color:var(--em-ring); font-weight:400; }

/* ── SERVICES / advisory ───────────────────────────────────── */
.srv-list { display:flex; flex-direction:column; }
.srv-row {
  display:grid; grid-template-columns:28px 1fr 16px; gap:1rem; align-items:start;
  padding:1rem .6rem; border-radius:9px; margin:0 -.6rem;
  border-bottom:1px solid var(--rule-2); position:relative; overflow:hidden;
  transition:background .15s;
}
.srv-row:last-child { border-bottom:none; }
.srv-row::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 0% 50%, var(--em-caustic) 0%, transparent 55%); opacity:0; transition:opacity .3s; }
.srv-row:hover { background:var(--bg-2); }
.srv-row:hover::before { opacity:1; }
.srv-row:hover .srv-arr { opacity:1; color:var(--em); transform:translate(2px,-2px); }
.srv-num { font-family:var(--mono); font-size:.58rem; color:var(--faint); padding-top:3px; position:relative; z-index:1; }
.srv-name { font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:.25rem; position:relative; z-index:1; }
.srv-desc { font-size:.9rem; color:var(--muted); line-height:1.6; position:relative; z-index:1; }
.srv-tags { margin-top:.5rem; position:relative; z-index:1; }
.srv-arr { font-size:.72rem; color:var(--faint); opacity:0; transition:opacity .15s, color .15s, transform .2s; padding-top:3px; position:relative; z-index:1; }

/* ── SELECTED WORK cards ───────────────────────────────────── */
.work-item { padding:1.4rem 0; border-top:1px solid var(--rule); transition:background .2s; }
.work-item:last-child { border-bottom:1px solid var(--rule); }
.work-link { text-decoration:none; color:inherit; display:block; }
.work-link:hover .work-title { color:var(--em); }
.work-header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.45rem; }
.work-title { font-family:var(--display); font-size:1.35rem; font-weight:400; color:var(--ink); letter-spacing:-0.01em; transition:color .2s; }
.work-org { font-family:var(--mono); font-size:.6rem; color:var(--subtle); white-space:nowrap; letter-spacing:.04em; }
.work-desc { font-size:.94rem; color:var(--muted); line-height:1.62; margin-bottom:.6rem; }
.work-stat { font-family:var(--mono); font-size:.74rem; color:var(--em); letter-spacing:.01em; }

/* ── EXPERIENCE / EDUCATION ────────────────────────────────── */
.exp-row { display:grid; grid-template-columns:120px 1fr; gap:1.5rem; padding:1.35rem 0; border-bottom:1px solid var(--rule-2); }
.exp-row:last-child { border-bottom:none; }
.exp-period { font-family:var(--mono); font-size:.63rem; color:var(--subtle); padding-top:3px; letter-spacing:.03em; }
.exp-co { font-size:1rem; font-weight:600; color:var(--ink); }
.exp-role { font-size:.82rem; color:var(--em); font-weight:600; margin:.15rem 0 .45rem; }
.exp-desc { font-size:.9rem; color:var(--muted); line-height:1.6; }
.edu-item { display:grid; grid-template-columns:1fr; gap:.15rem; padding:1.25rem 0; border-top:1px solid var(--rule); }
.edu-item:last-child { border-bottom:1px solid var(--rule); }
.edu-inst { font-family:var(--display); font-size:1.15rem; font-weight:400; letter-spacing:-0.01em; color:var(--ink); }
.edu-degree { font-size:.92rem; color:var(--muted); }
.edu-note { font-size:.86rem; color:var(--subtle); line-height:1.55; margin-top:.25rem; }

/* ── AWARDS / PUBS ─────────────────────────────────────────── */
.award-item { display:flex; align-items:baseline; gap:.8rem; padding:.85rem 0; border-top:1px solid var(--rule); }
.award-item:last-child { border-bottom:1px solid var(--rule); }
.award-dot { width:5px; height:5px; border-radius:50%; background:var(--em); flex-shrink:0; margin-top:.5rem; box-shadow:0 0 6px var(--em-ring); }
.award-name { font-size:.96rem; color:var(--ink); font-weight:600; }
.award-ctx { font-family:var(--mono); font-size:.63rem; color:var(--subtle); margin-left:auto; white-space:nowrap; letter-spacing:.03em; }

/* ── PODCAST ───────────────────────────────────────────────── */
.pod-card { border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--card); transition:box-shadow .35s; }
.pod-card:hover { box-shadow:var(--shadow-md); }
.pod-embed { aspect-ratio:16/9; background:#000; }
.pod-embed iframe { width:100%; height:100%; display:block; border:none; }
.pod-meta { padding:1rem 1.25rem; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pod-title { font-size:.96rem; font-weight:600; color:var(--ink); }
.pod-guest { font-size:.82rem; color:var(--muted); }
.pod-guest span { color:var(--em); font-weight:600; }
.pod-link { font-size:.72rem; font-weight:600; color:var(--muted); text-decoration:none; border:1px solid var(--rule); border-radius:7px; padding:.32rem .7rem; white-space:nowrap; transition:color .15s, border-color .15s; }
.pod-link:hover { color:var(--em); border-color:var(--em); }

/* ── CTA ───────────────────────────────────────────────────── */
#cta { padding:72px 0 84px; position:relative; }
#cta::before { content:''; position:absolute; top:0; left:-50%; right:-50%; bottom:0; background:radial-gradient(ellipse at 20% 0%, var(--em-glow) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, var(--em-caustic) 0%, transparent 45%); pointer-events:none; }
.cta-h { font-family:var(--display); font-size:clamp(2.1rem,5vw,3.2rem); font-weight:400; letter-spacing:-0.02em; line-height:1.05; color:var(--ink); margin-bottom:.75rem; position:relative; }
.cta-sub { font-size:1rem; color:var(--muted); line-height:1.65; max-width:480px; margin-bottom:2rem; position:relative; }
.cta-emails { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; position:relative; }
.cta-er { display:flex; align-items:center; gap:1rem; }
.cta-lbl { font-family:var(--mono); font-size:.58rem; color:var(--subtle); width:150px; flex-shrink:0; letter-spacing:.03em; }
.cta-v { font-size:.88rem; color:var(--muted); text-decoration:none; transition:color .15s; }
.cta-v:hover { color:var(--em); }

/* ── FOOTER ────────────────────────────────────────────────── */
footer { border-top:1px solid var(--rule); padding:1.4rem 2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; }
.fc { font-family:var(--mono); font-size:.6rem; color:var(--subtle); letter-spacing:.02em; }
.fl { display:flex; gap:1.4rem; }
.fl a { font-size:.73rem; color:var(--subtle); text-decoration:none; transition:color .15s; }
.fl a:hover { color:var(--em); }

/* ── PRISM DIVIDER ─────────────────────────────────────────── */
.prism-rule { height:1px; border:none; margin:0; position:relative; background:transparent; overflow:visible; }
.prism-rule::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, var(--em-glow) 15%, var(--em-ring) 35%, var(--em-bright) 50%, var(--em-ring) 65%, var(--em-glow) 85%, transparent 100%); opacity:.5; }
.prism-rule::after { content:''; position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:120px; height:5px; background:radial-gradient(ellipse at 50% 50%, var(--em-bright) 0%, var(--em) 35%, transparent 100%); filter:blur(2px); opacity:.4; border-radius:50%; }

/* ── REVEAL (JS-gated so content shows without JS) ─────────── */
html.js .reveal { opacity:0; transform:translateY(14px); }
.reveal { transition:opacity .6s ease, transform .6s ease; }
/* specificity must beat `html.js .reveal` (0,2,1), so scope `.in` under html.js too */
html.js .reveal.in { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; }

@keyframes up { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

/* ══════════════════════════════════════════════════════════════
   PROJECTS PAGE
   ══════════════════════════════════════════════════════════════ */
.page-hero { padding-top:120px; padding-bottom:48px; }
.page-hero h1 { font-size:clamp(2.4rem,5vw,3.4rem); margin-bottom:1rem; }
.page-hero .hero-p { animation:none; opacity:1; }

/* filter bar */
.filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:2.4rem; }
.filter-btn {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.03em;
  color:var(--muted); background:transparent; border:1px solid var(--rule);
  border-radius:20px; padding:.35rem .8rem; cursor:pointer;
  transition:all .18s;
}
.filter-btn:hover { border-color:var(--em); color:var(--em); }
.filter-btn.active { background:var(--em); color:var(--on-em); border-color:var(--em); }
.filter-btn .cnt { opacity:.6; margin-left:.3rem; }

/* project (expandable case study) */
.proj {
  border:1px solid var(--rule); border-radius:14px; background:var(--card);
  margin-bottom:1rem; overflow:hidden; transition:box-shadow .3s, border-color .3s, transform .3s;
}
.proj:hover { box-shadow:var(--shadow-md); border-color:var(--em-ring); }
.proj.open { box-shadow:var(--shadow-md); }
.proj-head { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1.5rem 1.6rem; cursor:pointer; align-items:start; }
.proj-eyebrow { display:flex; align-items:center; gap:.55rem; margin-bottom:.6rem; flex-wrap:wrap; }
.proj-kind { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--em); border:1px solid var(--em-ring); border-radius:5px; padding:.12rem .4rem; }
.proj-kind.research { color:var(--em); }
.proj-org { font-family:var(--mono); font-size:.6rem; color:var(--subtle); letter-spacing:.03em; }
.proj-title { font-family:var(--display); font-size:1.4rem; font-weight:400; letter-spacing:-0.01em; line-height:1.15; color:var(--ink); margin-bottom:.5rem; }
.proj-one { font-size:.98rem; color:var(--muted); line-height:1.6; max-width:56ch; }
.proj-metrics { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.9rem; }
.proj-metric { display:flex; flex-direction:column; }
.proj-metric b { font-family:var(--display); font-size:1.05rem; font-weight:400; color:var(--em); line-height:1; }
.proj-metric span { font-family:var(--mono); font-size:.55rem; color:var(--subtle); margin-top:.2rem; letter-spacing:.02em; }
.proj-toggle { width:32px; height:32px; border-radius:50%; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; transition:transform .3s, border-color .3s, color .3s; }
.proj:hover .proj-toggle { border-color:var(--em); color:var(--em); }
.proj.open .proj-toggle { transform:rotate(45deg); border-color:var(--em); color:var(--em); }
.proj-toggle svg { width:14px; height:14px; }

.proj-body { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1); }
.proj.open .proj-body { max-height:4000px; }
.proj-body-inner { padding:0 1.6rem 1.7rem; border-top:1px solid var(--rule); margin-top:.2rem; }
.cs-block { padding-top:1.3rem; }
.cs-h { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--subtle); margin-bottom:.55rem; }
.cs-p { font-size:.96rem; color:var(--ink-2); line-height:1.68; margin-bottom:.5rem; }
.cs-p.muted { color:var(--muted); }
.cs-list { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.cs-list li { font-size:.93rem; color:var(--muted); line-height:1.55; padding-left:1.1rem; position:relative; }
.cs-list li::before { content:'→'; position:absolute; left:0; color:var(--em); font-family:var(--mono); font-size:.75rem; }
.cs-takeaway { margin-top:1.3rem; padding:1rem 1.1rem; border-left:2px solid var(--em); background:var(--bg-2); border-radius:0 8px 8px 0; }
.cs-takeaway .cs-h { color:var(--em); }
.cs-takeaway p { font-size:.95rem; color:var(--ink-2); line-height:1.62; font-style:italic; }
.cs-note { font-family:var(--mono); font-size:.62rem; color:var(--faint); margin-top:1rem; line-height:1.6; }
.cs-links { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ── VIZ ───────────────────────────────────────────────────── */
.viz { margin-top:1.3rem; border:1px solid var(--rule); border-radius:12px; padding:1.2rem 1.3rem; background:var(--bg-2); }
.viz-title { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--subtle); margin-bottom:.2rem; }
.viz-cap { font-size:.88rem; color:var(--muted); line-height:1.5; margin-bottom:1rem; }
.viz-toggle { display:inline-flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.viz-toggle button { font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; padding:.4rem .8rem; background:transparent; border:none; color:var(--muted); cursor:pointer; transition:all .18s; }
.viz-toggle button.active { background:var(--em); color:var(--on-em); }
.viz-svg { width:100%; height:auto; display:block; overflow:visible; }
.viz-legend { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.9rem; font-family:var(--mono); font-size:.6rem; color:var(--subtle); }
.viz-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.viz-legend i { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* retrieval bars */
.bars { display:flex; flex-direction:column; gap:.7rem; }
.bar-row { display:grid; grid-template-columns:130px 1fr 44px; gap:.7rem; align-items:center; }
.bar-lbl { font-family:var(--mono); font-size:.64rem; color:var(--muted); }
.bar-track { height:12px; background:var(--rule); border-radius:6px; overflow:hidden; }
.bar-fill { height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--em-deep),var(--em-bright)); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar-val { font-family:var(--mono); font-size:.68rem; color:var(--em); text-align:right; font-weight:500; }

/* counter */
.counter-wrap { display:flex; align-items:baseline; gap:.6rem; margin-top:.4rem; }
.counter { font-family:var(--display); font-size:2.6rem; font-weight:400; color:var(--em); letter-spacing:-0.02em; line-height:1; }
.counter-sub { font-family:var(--mono); font-size:.64rem; color:var(--subtle); line-height:1.4; }

/* phi graph nodes labels handled inline in SVG */

/* ── COMMAND PALETTE ───────────────────────────────────────── */
#cmdk-overlay {
  position:fixed; inset:0; z-index:10050; display:none;
  background:color-mix(in srgb, var(--ink) 30%, transparent);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  align-items:flex-start; justify-content:center; padding-top:14vh;
}
#cmdk-overlay.show { display:flex; }
.cmdk-box {
  width:min(540px,92vw); background:var(--card); border:1px solid var(--rule);
  border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
  animation:cmdkIn .18s ease;
}
@keyframes cmdkIn { from{opacity:0;transform:translateY(-8px) scale(.98);} to{opacity:1;transform:none;} }
.cmdk-input { width:100%; border:none; outline:none; background:transparent; color:var(--ink);
  font-family:var(--body); font-size:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--rule); }
.cmdk-input::placeholder { color:var(--faint); }
.cmdk-list { max-height:min(420px,60vh); overflow-y:auto; padding:.4rem; }
.cmdk-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; border-radius:9px; cursor:pointer; color:var(--muted); font-size:.86rem; }
.cmdk-item .ci-icon { width:18px; text-align:center; color:var(--subtle); }
.cmdk-item .ci-hint { margin-left:auto; font-family:var(--mono); font-size:.58rem; color:var(--faint); }
.cmdk-item.sel, .cmdk-item:hover { background:var(--bg-2); color:var(--ink); }
.cmdk-item.sel .ci-icon { color:var(--em); }
.cmdk-group { font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:.6rem .8rem .3rem; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:760px){
  main { padding:0 1.25rem; }
  nav { padding:0 1.1rem; height:64px; }
  .nav-link { display:none; }
  nav [data-cmdk-open] { display:none; }
  .nav-name { font-size:.92rem; }
  .nav-cta { font-size:.74rem; padding:.4rem .75rem; margin-left:.3rem; }
  h1 { font-size:clamp(2.2rem,8.5vw,2.9rem); }
  .page-hero h1 { font-size:clamp(2rem,8vw,2.6rem); }
  #hero { padding-top:100px; }
  .stats { grid-template-columns:1fr 1fr; }
  .st:nth-child(2) { border-right:none; }
  .st:nth-child(3),.st:nth-child(4) { border-top:1px solid var(--rule); }
  .st:nth-child(4) { border-right:none; }
  .exp-row { grid-template-columns:1fr; gap:.25rem; }
  .work-header { flex-direction:column; gap:.2rem; }
  .award-item { flex-wrap:wrap; }
  .award-ctx { margin-left:1.25rem; }
  .proj-head { grid-template-columns:1fr auto; padding:1.2rem 1.15rem; }
  .proj-body-inner { padding:0 1.15rem 1.4rem; }
  .bar-row { grid-template-columns:96px 1fr 40px; }
  footer { padding:1.25rem; }
  #cursor, #cursor-glow { display:none; }
}

/* ── DISPLAY WEIGHT ─────────────────────────────────────────
   Fraunces has real heft — give headings presence (not thin). */
h1, .s-h2, .cta-h, .work-title, .proj-title, .edu-inst,
.st-n, .proj-metric b, .counter, .pn-t {
  font-weight: 560;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}
h1 { letter-spacing: -0.025em; }
.serif-em, h1 em { font-weight: 500; }