/* mjalif.com homepage — ported from Claude Design "MJ Alif Home.dc.html".
   Tokens and values are the design's; the design's inline styles are lifted
   into classes so hover/focus states can exist at all. */

:root{
  --bg:#111318; --bg2:#171a21; --bg3:#1e222b; --ink:#eceef4; --ink2:#b0b6c4; --ink3:#868ea0;
  --rule:#2b303b; --accent:#a99dff; --accent-ink:#111318; --mark:rgba(169,157,255,0.24); --lift:rgba(0,0,0,0.4);
  --display:"Instrument Serif",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:20px; --cols:1fr; --sec:64px; --nav-d:none; --nav-m:flex; --split:1fr; --rail-mb:18px; --r:18px;
}
:root[data-theme="light"]{
  --bg:#f8f9fd; --bg2:#eef0f8; --bg3:#e4e8f3; --ink:#14161c; --ink2:#464c5a; --ink3:#5d6473;
  --rule:#d6dae7; --accent:#4b3fd6; --accent-ink:#ffffff; --mark:rgba(75,63,214,0.14); --lift:rgba(20,22,28,0.12);
}
@media (min-width:768px){ :root{ --pad:40px; --sec:96px; } }
@media (min-width:1024px){ :root{ --cols:132px minmax(0,1fr); --pad:56px; --sec:120px; --nav-d:flex; --nav-m:none; --split:1.15fr 0.85fr; --rail-mb:0px; } }
@media (min-width:1440px){ :root{ --pad:76px; --sec:136px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:clamp(1rem,0.96rem + 0.2vw,1.125rem);line-height:1.6;text-wrap:pretty;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-0.01em;line-height:1.05}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--ink)}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
section[id]{scroll-margin-top:84px}
input,textarea{font:inherit}
mark{background:var(--mark);color:inherit;padding:0 3px;border-radius:3px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- shell ---- */
.wrap{max-width:1400px;margin:0 auto}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:14px 20px;border-radius:999px;font-family:var(--mono);font-size:13px;text-decoration:none}
.skip:focus{left:14px;top:14px}

.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand-mark{width:34px;height:34px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{font-family:var(--display);font-size:20px;color:var(--ink)}
.nav-desktop{display:var(--nav-d);align-items:center;gap:6px}
.nav-link{font-family:var(--mono);font-size:12.5px;color:var(--ink2);text-decoration:none;padding:10px 13px;border-radius:999px}
.nav-link:hover{color:var(--ink);background:var(--bg2)}
.pill{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-decoration:none;border:1.5px solid var(--rule);border-radius:999px;padding:10px 16px;display:inline-flex;align-items:center;min-height:44px}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill--cv{margin-left:6px}
.pill--lg{font-size:13px;padding:13px 20px;min-height:46px}
.btn-ghost{background:var(--bg2);border:1px solid var(--rule);border-radius:999px;padding:10px 14px;font-family:var(--mono);font-size:12.5px;color:var(--ink2);cursor:pointer;min-height:42px}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent)}
.nav-mobile-actions{display:var(--nav-m);align-items:center;gap:8px}
.nav-mobile-actions .btn-ghost{padding:0 16px;min-height:44px;font-size:12px}
.btn-accent{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:0 18px;min-height:44px;font-family:var(--mono);font-size:12px;cursor:pointer}
.mnav{border-top:1px solid var(--rule);padding:10px var(--pad) 22px;display:flex;flex-direction:column;gap:2px;background:var(--bg2)}
.mnav a{font-family:var(--mono);font-size:15px;color:var(--ink);text-decoration:none;padding:14px 12px;border-radius:12px;min-height:44px}
.mnav a:hover{background:var(--bg3)}
.mnav .mnav-cv{color:var(--accent-ink);background:var(--accent);margin-top:8px;text-align:center}
.mnav .mnav-cv:hover{color:var(--accent-ink)}

/* ---- sections ---- */
.hero{padding:clamp(40px,7vw,88px) var(--pad) clamp(32px,5vw,56px)}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--ink2);background:var(--bg2);border:1px solid var(--rule);border-radius:999px;padding:8px 15px;margin-bottom:clamp(24px,4vw,36px)}
.badge-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);flex-shrink:0}
.hero h1{font-size:clamp(2.9rem,9vw,6.2rem);line-height:0.94;letter-spacing:-0.02em;max-width:19ch;margin-bottom:clamp(24px,3.5vw,34px)}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:var(--split);gap:clamp(22px,4vw,64px);align-items:end}
.hero-lede{font-size:clamp(1.06rem,1.7vw,1.3rem);color:var(--ink);max-width:56ch;margin-bottom:14px}
.hero-note{color:var(--ink2);max-width:62ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.btn-cta{font-family:var(--mono);font-size:13.5px;color:var(--accent-ink);background:var(--accent);text-decoration:none;padding:17px 26px;border-radius:999px;min-height:50px;display:inline-flex;align-items:center;gap:9px;transition:transform 0.18s ease}
.btn-cta:hover{transform:translateY(-2px);color:var(--accent-ink)}
.link-underline{font-family:var(--mono);font-size:13.5px;color:var(--ink2);text-decoration:none;padding:14px 4px;min-height:44px;display:inline-flex;align-items:center;border-bottom:1.5px solid var(--rule)}
.link-underline:hover{color:var(--ink);border-bottom-color:var(--accent)}

.stats{padding:0 var(--pad) clamp(48px,7vw,88px)}
.stat-grid{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.stat{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px 18px}
.stat dd{margin:0;font-family:var(--mono);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat dd.accent{color:var(--accent)}
.stat dt{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;color:var(--ink3);margin-top:12px}
.note{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:12px;line-height:1.6}
.note .strong{color:var(--ink2)}
.flag{border:1px dashed var(--rule);border-radius:8px;padding:3px 8px;display:inline-block;margin-top:4px}
.ph{border:1px dashed var(--rule);border-radius:8px;padding:3px 8px;color:var(--ink3);font-size:11.5px}

.sec{padding:var(--sec) var(--pad);border-top:1px solid var(--rule);display:grid;grid-template-columns:var(--cols);gap:var(--rail-mb) clamp(24px,4vw,56px)}
.rail{font-family:var(--mono);font-size:12px;color:var(--ink3);padding-top:10px}
.sec h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.lede{color:var(--ink2)}
.split{display:grid;grid-template-columns:var(--split);gap:clamp(28px,4vw,56px);align-items:start}
.portrait-fig{margin:0}
.portrait{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--bg2)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,4vw,40px)}
.toggle-group{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--rule);border-radius:999px;padding:4px}
.toggle{background:transparent;color:var(--ink2);border:none;border-radius:999px;padding:0 18px;min-height:44px;font-family:var(--mono);font-size:12px;cursor:pointer}
.toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.group{margin-bottom:clamp(28px,4vw,44px)}
.group-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.group-head h3{font-family:var(--mono);font-size:12px;color:var(--ink);line-height:1.5}
.count{font-family:var(--mono);font-size:11px;color:var(--ink3);background:var(--bg2);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
.rule-line{flex:1;height:1px;background:var(--rule)}

.pub{display:grid;grid-template-columns:1fr auto;gap:8px 18px;padding:18px 14px;margin:0 -14px;border-radius:14px;align-items:baseline;border-bottom:1px solid var(--rule);transition:background 0.16s ease}
.pub:hover{background:var(--bg2)}
.pub > div{min-width:0}
.pub-title{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.25;color:var(--ink);text-decoration:none}
.pub-title:hover{color:var(--accent)}
.pub-meta{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:10px;line-height:1.6}
.pub-meta a{color:var(--ink2)}
.pub-meta a:hover{color:var(--accent)}
.cites{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap;background:var(--bg2);border-radius:999px;padding:6px 12px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:14px;transition:transform 0.18s ease,border-color 0.18s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.kicker{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.metric{font-family:var(--mono);font-weight:700;font-size:clamp(2.1rem,4.4vw,3rem);line-height:0.95;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-0.03em}
.metric-note{font-family:var(--mono);font-size:11.5px;color:var(--ink3);line-height:1.6;margin-top:-6px}
.card h3{font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.2;margin-top:6px}
.card .summary{font-size:0.96rem;color:var(--ink2);line-height:1.55}
.meta-dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-family:var(--mono);font-size:11.5px;border-top:1px solid var(--rule);padding-top:14px;margin-top:auto}
.meta-dl dt{color:var(--ink3)}
.meta-dl dd{margin:0;color:var(--ink2)}
.card-link{font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--rule);padding-bottom:3px}
.card-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

.role{display:grid;grid-template-columns:var(--split);gap:6px clamp(20px,3vw,40px);padding:18px 0;border-bottom:1px solid var(--rule)}
.role-title{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--ink);line-height:1.25}
.role-org{font-size:0.96rem;color:var(--ink2);margin-top:4px}
.role-note{font-size:0.96rem;color:var(--ink2);max-width:62ch;margin-top:8px}
.role-dates{font-family:var(--mono);font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;padding-top:6px}

.interest{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:var(--split);gap:18px clamp(24px,4vw,48px)}
.interest h3{font-size:clamp(1.25rem,2.2vw,1.55rem);margin-bottom:12px}
.interest p{font-size:0.98rem;color:var(--ink2);max-width:56ch}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tool{font-family:var(--mono);font-size:11.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:7px 13px}

.post{padding:18px 14px;margin:0 -14px;border-radius:14px;border-bottom:1px solid var(--rule);transition:background 0.16s ease}
.post:hover{background:var(--bg2)}
.post-title{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.25;color:var(--ink);text-decoration:none;display:inline-block;max-width:62ch}
.post-title:hover{color:var(--accent)}
.post-meta{font-family:var(--mono);font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;margin-top:9px}

.contact-grid{display:grid;grid-template-columns:var(--split);gap:clamp(30px,5vw,60px);align-items:start}
.email-pill{font-family:var(--mono);font-size:clamp(1rem,2.2vw,1.3rem);word-break:break-all;text-decoration:none;background:var(--bg2);border:1px solid var(--rule);border-radius:999px;padding:14px 20px;display:inline-flex;min-height:50px;align-items:center;color:var(--ink)}
.email-pill:hover{border-color:var(--accent);color:var(--accent)}
.contact-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-family:var(--mono);font-size:12.5px;border-top:1px solid var(--rule);padding-top:22px}
.contact-dl dt{color:var(--ink3);padding-top:2px}
.contact-dl dd{margin:0;color:var(--ink2)}
.contact-dl dd a{color:var(--ink2)}
.contact-dl dd a:hover{color:var(--accent)}
.contact-form{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.field input,.field textarea{background:var(--bg);border:1px solid var(--rule);border-radius:12px;color:var(--ink);padding:14px 15px;font-size:16px}
.field input{min-height:50px}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.err{font-family:var(--mono);font-size:11.5px;color:var(--accent);min-height:1px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit{background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;padding:16px 24px;min-height:50px;font-family:var(--mono);font-size:13px;cursor:pointer;transition:transform 0.18s ease}
.submit:hover{transform:translateY(-2px)}
.status{font-family:var(--mono);font-size:12px;color:var(--ink2);line-height:1.6}

.site-footer{border-top:1px solid var(--rule);background:var(--bg2)}
.foot{padding:clamp(32px,4vw,52px) var(--pad);display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;align-items:baseline}
.foot-name{font-family:var(--display);font-size:1.35rem;color:var(--ink)}
.foot-role{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:8px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 10px;font-family:var(--mono);font-size:12px}
.foot-nav a{color:var(--ink2);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover{color:var(--accent);border-color:var(--accent)}
.copy{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}

/* ---- motion pass (from the updated Claude Design mockup) ----
   Implemented entirely here, with pseudo-elements standing in for the
   design's decorative <span>s, so index.html needs no new markup. Every
   animation is covered by the prefers-reduced-motion rule above, which
   kills animation and transition outright. */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes boxIn{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}
@keyframes chipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pulseRing{0%{transform:scale(1);opacity:0.55}70%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* hero enters in sequence: badge, headline, then the lede/CTA row */
.badge{animation:riseIn 0.5s cubic-bezier(0.22,0.8,0.3,1) both}
.hero h1{animation:riseIn 0.6s cubic-bezier(0.22,0.8,0.3,1) 0.08s both}
.hero-grid{animation:riseIn 0.6s cubic-bezier(0.22,0.8,0.3,1) 0.2s both}

/* the availability dot gets a slow expanding ring */
.badge-dot{position:relative}
.badge-dot::after{content:"";position:absolute;inset:0;border-radius:999px;
  background:var(--accent);animation:pulseRing 2.4s ease-out 1.6s infinite}

/* the headline's "miss" is framed like a detection box, with the label a
   detector would draw under it. Decorative and inert: pointer-events:none,
   and both pseudo-elements are invisible to assistive tech, which reads the
   word "miss" and nothing else. */
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::before{content:"";position:absolute;inset:-0.06em -0.12em 0.02em;
  border:2px solid var(--accent);border-radius:5px;pointer-events:none;
  animation:boxIn 0.5s cubic-bezier(0.22,0.8,0.3,1) 0.7s both}
.hero h1 em::after{content:"miss · 0.98";position:absolute;top:calc(100% + 0.14em);
  left:-0.12em;font-family:var(--mono);font-style:normal;font-size:11px;line-height:1;
  letter-spacing:0.02em;white-space:nowrap;color:var(--accent-ink);background:var(--accent);
  border-radius:4px;padding:4px 6px;pointer-events:none;
  animation:chipIn 0.35s ease-out 1.15s both}

/* stat cards rise in sequence and lift on hover */
.stat{animation:riseIn 0.55s cubic-bezier(0.22,0.8,0.3,1) both;
  transition:transform 0.18s ease,border-color 0.18s ease}
.stat:nth-child(1){animation-delay:0.30s}
.stat:nth-child(2){animation-delay:0.36s}
.stat:nth-child(3){animation-delay:0.42s}
.stat:nth-child(4){animation-delay:0.48s}
.stat:hover{transform:translateY(-3px);border-color:var(--accent)}

/* the citation figure draws its own underline */
.stat dd.accent::after{content:"";display:block;height:2px;background:var(--accent);
  border-radius:2px;margin-top:10px;transform-origin:left;
  animation:barGrow 0.9s cubic-bezier(0.22,0.8,0.3,1) 0.7s both}

/* the CTA arrow spreads as you approach it */
.btn-cta{transition:transform 0.18s ease,gap 0.18s ease}
.btn-cta:hover{gap:14px}